easyUI droppable组件使用：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="easyui/jquery.min.js"></script> <script src="easyui/jquery.easyui.min.js"></script> <script src="easyui/locale/easyui-lang-zh_CN.js"></script> <script src="js/test004.js"></script> <link rel="stylesheet" href="easyui/themes/default/easyui.css"> <link rel="stylesheet" href="easyui/themes/icon.css"> </head> <body> <div id="pox" class="easyui-droppable" data-options="accept:'#box',onDragEnter:function(e,s){console.log('onDrapEnter');}" style="border:1px solid red;300px;height:300px">this is container</div> <div id="box" class="easyui-draggable" style="border:1px solid black;100px">this is children</div> <div id="pox2" style="border:1px solid black;300px;height:300px">this is container2</div> </body> </html>
$(function(argument) { var obj = { accept: '#box', //接收哪些对象，可以是.className之类的选择器 //disabled:true,//禁止放置，但是还是能放上去的，但是事件都不响应了； onDragEnter: function(e) { //e类型_dragener console.log('onDragEnter'); console.log(e); }, onDragOver: function(e) { //e类型_dragover // console.log('onDragOver'); // console.log(e); console.log($(this).droppable('options')); //获取options对象； }, onDragLeave: function(e) { //e类型_dragleave console.log('onDragLeave'); console.log(e); }, onDrop: function(e) { //e类型_drop console.log('onDrop'); console.log(e); } }; $('#pox2').droppable(obj);
$('#pox2').droppable('disable'); // 有效果呀；
$('#pox').droppable('disable'); // 有效果呀；
});