easyUI之放置控制元件——easyui-dropable
droppable 放置元件,可接受拖動元件放置,觸發相關事件。
事件列表:
頁面實現:<div id="dop" class="easyui-droppable" style="width:400px;height:200px;background:black"></div>
js實現:
$('#box').draggable();
$('#dop').droppable({
accept:'#box', //放置區域接受某個控制元件(識別某個控制元件後執行事件)
//disabled:true,
onDragEnter:function(e,source){//拖動進入放置區域時,觸發事件
$('#dop').css('background','orange');
},
onDragOver:function(e,source){//拖動進入放置區域過程中,不斷觸發事件
$('#dop').css('background','blue');
},
onDragLeave:function(e,source){//拖動離開放置區域時,觸發事件
$('#dop').css('background','red');
},
onDrop:function(e,source){//拖動進入放置區域中後,鬆開滑鼠觸發事件
$('#dop').css('background','maroon');
},
});
相關解釋見程式碼。
方法列表同draggable.一下不做過多解釋。
droppable,是一個放置元件,當識別指定的控制元件拖動到其中時可觸發相關事件,執行操作。例如:典型的獲取拖動元件放置在某個框中,或獲取拖動元件中的相關內容顯示在放置元件中等等。