jQuery EasyUI，Droppable(放置)組件

?

學習要點：

　　1.加載方式

　　2.屬性列表

　　3.事件列表

　　4.方法列表

?

本節課重點了解 EasyUI 中 Droppable(放置)組件的使用方法，所謂放置，就將一個 物體入某一個物體內觸發各種效果，這個組件不依賴于其他組件。

?

一．加載方式

//class 加載方式 <div id="dd"class="easyui-droppable"data-options="accept:'#box,#pox'"style="background:black;width:600px;height:400px;"> </div>

droppable()將一個元素設置成放置元素，放置元素就是將另外指定的元素放置進來觸發事件

//JS 加載調用 $('#box').droppable({accept:'#box,#pox', });

?

?

二．屬性列表

accept selector 默認為 null，確定哪些元素被接受，值為要接收放置的元素id

/** <div id="fzh">放置</div><div id="box"><div id="pox">內容部分</div> </div>**/$(function () {$('#box').draggable({ //將box元素設置拖拽 });$('#fzh').droppable({ //將fzh元素設置成放置accept:'#box,#pox' //確定哪些元素被接受，值為要接收放置的元素id }) });

?

disabled boolean 默認為 false，如果為 true，則禁止放置

?

/** <div id="fzh">放置</div><div id="box"><div id="pox">內容部分</div> </div>**/$(function () {$('#box').draggable({ //將box元素設置拖拽 });$('#fzh').droppable({ //將fzh元素設置成放置accept:'#box,#pox', //確定哪些元素被接受，值為要接收放置的元素iddisabled:true //如果為 true，則禁止放置 }) });

?

?

?

三．事件列表

?

注意：以下事件 e接收的事件event對象，source接收的放置進來的元素對象

onDragEnter ?e,source 在被拖拽元素到放置區內的時候觸發，只觸發一次

/** <div id="fzh">放置</div><div id="box"><div id="pox">內容部分</div> </div>**/$(function () {$('#box').draggable({ //將box元素設置拖拽 });$('#fzh').droppable({ //將fzh元素設置成放置accept: '#box,#pox', //確定哪些元素被接受，值為要接收放置的元素idonDragEnter: function (e, source) { //在被拖拽元素到放置區內的時候觸發，只觸發一次$(this).css('background', 'blue');}}) });

?

onDragOver ?e,source 在被拖拽元素經過放置區的時候觸發

/** <div id="fzh">放置</div><div id="box"><div id="pox">內容部分</div> </div>**/$(function () {$('#box').draggable({ //將box元素設置拖拽 });$('#fzh').droppable({ //將fzh元素設置成放置accept: '#box,#pox', //確定哪些元素被接受，值為要接收放置的元素idonDragEnter: function (e, source) { //在被拖拽元素經過放置區的時候觸發，觸發多次$(this).css('background', 'blue');}}) });

?

onDragLeave ?e,source 在被拖拽元素離開放置區的時候觸發

/** <div id="fzh">放置</div><div id="box"><div id="pox">內容部分</div> </div>**/$(function () {$('#box').draggable({ //將box元素設置拖拽 });$('#fzh').droppable({ //將fzh元素設置成放置accept: '#box,#pox', //確定哪些元素被接受，值為要接收放置的元素idonDragLeave: function (e, source) { //在被拖拽元素離開放置區的時候觸發，$(this).css('background', 'blue');}}) });

?

onDrop ?e,source 在被拖拽元素放入到放置區的時候觸發，也就是放下鼠標左鍵彈起時觸發

?

/** <div id="fzh">放置</div><div id="box"><div id="pox">內容部分</div> </div>**/$(function () {$('#box').draggable({ //將box元素設置拖拽 });$('#fzh').droppable({ //將fzh元素設置成放置accept: '#box,#pox', //確定哪些元素被接受，值為要接收放置的元素idonDrop: function (e, source) { //在被拖拽元素放入到放置區的時候觸發，也就是放下鼠標左鍵彈起時觸發$(this).css('background', 'blue');}}) });

?

?

?

?

四．方法列表

?

options ?none 返回屬性對象

/** <div id="fzh">放置</div><div id="box"><div id="pox">內容部分</div> </div>**/$(function () {$('#box').draggable({ //將box元素設置拖拽 });$('#fzh').droppable({ //將fzh元素設置成放置accept: '#box,#pox', //確定哪些元素被接受，值為要接收放置的元素idonDrop: function (e, source) { //在被拖拽元素放入到放置區的時候觸發，也就是放下鼠標左鍵彈起時觸發$(this).css('background', 'blue');}});var p = $('#fzh').droppable('options'); //options none 返回屬性對象$.each(p, function (attr, value) { //遍歷屬性對象alert(attr + ':' + value);}); });

?

enable ?none 啟用放置功能

/** <div id="fzh">放置</div><div id="box"><div id="pox">內容部分</div> </div>**/$(function () {$('#box').draggable({ //將box元素設置拖拽 });$('#fzh').droppable({ //將fzh元素設置成放置accept: '#box,#pox', //確定哪些元素被接受，值為要接收放置的元素idonDrop: function (e, source) { //在被拖拽元素放入到放置區的時候觸發，也就是放下鼠標左鍵彈起時觸發$(this).css('background', 'blue');}});$('#fzh').droppable('disable'); //disable none$('#fzh').droppable('enable'); //enable none 啟用放置功能 });

?

disable ?none 禁用放置功能

/** <div id="fzh">放置</div><div id="box"><div id="pox">內容部分</div> </div>**/$(function () {$('#box').draggable({ //將box元素設置拖拽 });$('#fzh').droppable({ //將fzh元素設置成放置accept: '#box,#pox', //確定哪些元素被接受，值為要接收放置的元素idonDrop: function (e, source) { //在被拖拽元素放入到放置區的時候觸發，也就是放下鼠標左鍵彈起時觸發$(this).css('background', 'blue');}});$('#fzh').droppable('disable'); //disable none 禁用放置功能 });

?

$.fn.droppable.defaults 重寫默認值對象。

$.fn.droppable.defaults.disabled = true;

?

轉載于:https://www.cnblogs.com/adc8868/p/6636027.html

總結

以上是生活随笔為你收集整理的第一百九十四节，jQuery EasyUI，Droppable(放置)组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。