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