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,是一个放置组件,当识别指定的控件拖动到其中时可触发相关事件,执行操作。例如:典型的获取拖动组件放置在某个框中,或获取拖动组件中的相关内容显示在放置组件中等等。