# 加载方式 ## class方式加载 ``` <div id="dd" class="easyui-droppable" data-options="accept:'#box1'" style="background:black;width:600px;height:400px;"></div> ``` ## JS方式加载 ``` <div id="dd"style="background:black;width:600px;height:400px;"></div> <div id="box"style="width:100px;height:100px;background:#ccc;"> <span id="pox">内容部分</span> </div> <script> $(function () { $('#dd').droppable({ // 被接受元素 (如果不是则不会触发任何事件) accept:'#box', // 禁止放置,不会触发任何事件 //disabled:true, // 在被拖拽元素到放置区内的时候触发 onDragEnter:function (e, source) { // source 参数就是被拖进去的元素 console.log('enter'); $(this).css('background','blue'); }, // 在被拖拽元素经过放置区的时候触发 onDragOver:function (e, source) { console.log('over'); $(this).css('background','red'); }, // 在被拖拽元素离开放置区的时候触发 onDragLeave:function (e, source) { console.log('leave'); $(this).css('background','orange'); }, // 在被拖拽元素放入到放置区的时候触发(鼠标松开) onDrop:function (e, cource) { console.log('drop'); $(this).css('background','green'); } }); $('#box').draggable(); }); </script> ``` # 属性列表 | 属性名 | 值 | 说明| | ---|--- | ---| | accept |selector | 默认为 null，确定哪些元素被接受| | disabled |boolean | 默认为 false如果为 true，则禁止放置| # 事件列表 | 事件名 | 传参 | 说明| | ---|--- | ---| | onDragEnter | e,source| 在被拖拽元素到放置区内的时候触发| | onDragOver | e,source | 在被拖拽元素经过放置区的时候触发| | onDragLeave | e,source | 在被拖拽元素离开放置区的时候触发| | onDrop | e,source | 在被拖拽元素放入到放置区的时候触发| # 方法列表 | 方法名 | 传参 | 说明| | ---|--- | ---| | options | none | 返回属性对象| | enable | none | 启用放置功能| | disable | none | 禁用放置功能| ``` // 返回属性对象 console.log($('#box').droggable('options')); //禁止放置 $('#box').draggable('disable'); //启用放置 $('#box').draggable('enable'); // 可以使用$.fn.droppable.defaults 重写默认值对象。 $.fn.droppable.defaults.disabled = true; ```