所謂放置，就是將一個物體放入一個物體內，當然對于easyui來說觸發各種效果是必不可少的，同時這個組件也不會依賴于其他組件。
Droppable的加載方式
1,class 加載 一直不太喜歡class方式的加載 浪費一個位置，代碼一多還看著亂七八糟的。
2,js 加載調用
$("#box").droppable({ accept:'#pox', //將元素pox 放置在元素box中}); Droppable的屬性
1,accept 默認為null,確定哪些元素被接受，也就是那個元素能被放置
$("#box").droppable({ accept:'#pox', //將元素pox 放置在元素box中}); 2，deisabled 默認為false 如果為true，則禁止放置
$("#box").droppable({ accept:'#pox', //將元素pox 放置在元素box中 disabled : true , //禁止放置});Droppable 事件列表
1,onDragEnter 在被拖拽元素到放置區域內的時候觸發
2,onDragOver 在被拖拽元素經過放置區域的時候觸發
3,onDragLeave 在被拖拽元素離開放置區域的時候觸發
4,onDrop 在被拖拽元素放入到放置區的時候觸發
onDragEnter /onDragOver/onDragLeave/onDrop: function (e,source){ //source 參數獲取DOM元素 }Droppable 方法列表
1，options 返回屬性對象
console.log($('#box').droppable('options'));2,enable,disable 和上面屬性的功能是一樣的 分別是啟用和禁止放置
$('#box').droppable('enable/disable')給大家展示下官方的示例吧
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Accept a Drop - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6/themes/metro/easyui.css"> <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6/themes/icon.css"> <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6/demo/demo.css"> <script type="text/javascript" src="jquery-easyui-1.3.6/jquery.min.js"></script> <script type="text/javascript" src="jquery-easyui-1.3.6/jquery.easyui.min.js"></script></head><body> <div style="margin:20px 0;"></div> <div id="source" style="border:1px solid #ccc;width:300px;height:400px;float:left;margin:5px;"> drag me! <div id="d1" class="drag">Drag 1</div> <div id="d2" class="drag">Drag 2</div> <div id="d3" class="drag">Drag 3</div> </div> <div id="target" style="border:1px solid #ccc;width:300px;height:400px;float:left;margin:5px;"> drop here! </div> <div style="clear:both"></div> <style type="text/css"> .drag{ width:100px; height:50px; padding:10px; margin:5px; border:1px solid #ccc; background:#AACCFF; } .dp{ opacity:0.5; filter:alpha(opacity=50); } .over{ background:#FBEC88; } </style> <script> /** 使用js方式將元素設置為可draggable的 */ $(function(){ $('.drag').draggable({ proxy:'clone', revert:true, cursor:'pointer', onStartDrag:function(){ $(this).draggable('options').cursor='not-allowed';//設置鼠標樣式為不可拖動 $(this).draggable('proxy').addClass('dp');//設置樣式 }, onStopDrag:function(){ $(this).draggable('options').cursor='auto';//設置鼠標 } }); //將容易置為droppable并且可接受元素 $('#target').droppable({ accept:'#d1,#d3', onDragEnter:function(e,source){//拖入 $(source).draggable('options').cursor='auto'; $(source).draggable('proxy').css('border','1px solid red'); $(this).addClass('over'); }, onDragLeave:function(e,source){//脫離 $(source).draggable('options').cursor='not-allowed'; $(source).draggable('proxy').css('border','1px solid #ccc'); $(this).removeClass('over'); }, onDrop:function(e,source){//放下 $(this).append(source) $(this).removeClass('over'); alert("我被放下了"); } , //onDropOver當元素被拖出(成功放入到某個容器)的時候觸發 onDragOver:function(e,source){ alert("我被拖出去了");//先于alert("我被放下了");執行,表明其觸發在onDrop之前。 } }); }); </script> </body></html> 運行效果圖這里就不給出了,官網直接就可以查看。OVER!
效果地址: http://www.jeasyui.com/demo/main/index.php?plugin=Droppable&theme=default&dir=ltr&pitem=
easyui 1.3.5 Droppable 就此完結。
新聞熱點
疑難解答
