# 加載方式 ## 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; ```