easyui的droppable使得被声明的元素变为可放置元素，即该元素可做为容器，盛放被拖拽的元素
<!DOCTYPE html> <html> <head> <title>jQuery Easy UI</title> <meta charset="UTF-8" /> <script type="text/javascript" src="C:/Users/秋萍/Desktop/easyui/jquery-easyui-1.5.1/jquery.min.js"></script> <script type="text/javascript" src="C:/Users/秋萍/Desktop/easyui/jquery-easyui-1.5.1/jquery.easyui.min.js"></script> <script type="text/javascript" src="C:/Users/秋萍/Desktop/easyui/jquery-easyui-1.5.1/locale/easyui-lang-zh_CN.js" ></script> <link rel="stylesheet" type="text/css" href="C:/Users/秋萍/Desktop/easyui/jquery-easyui-1.5.1/themes/default/easyui.css" /> <link rel="stylesheet" type="text/css" href="C:/Users/秋萍/Desktop/easyui/jquery-easyui-1.5.1/themes/icon.css" /> <script type="text/javascript"> $(function(){ $.fn.droppable.defaults.disabled=true;//设置默认为不可以放置元素 $('#dd').droppable({ accept : '#box', disabled : false,//设置容器可以放置元素 onDragEnter : function(e,source){//被拖拽的元素到容器时 触发 $(this).css('background','blue'); console.log('----'+e);//e 当前对象 for(x in e){ console.log(x+'-------'+e[x]); } console.log('----'+source);// source 被拖拽的对象 for(x in source){ console.log(x+'-------'+source[x]); } //alert("enter"); }, onDragOver : function(e,source){//被拖拽的元素经过容器时 触发 $(this).css('background','#f00'); alert("over"); }, onDragLeave : function(e,source){//被拖拽的元素离开容器时 触发 $(this).css('background','#ff0'); }, onDrop : function(e,source){//被拖拽的元素放置在容器时 触发 $(this).css('background','#000'); console.log($("#dd").droppable("options"));//获得 对象的 option属性对象 //$("#dd").droppable("disable");//设置容器不可以放置元素 //$("#dd").droppable("enable");//设置容器可以放置元素 } }); $('#box').draggable({ }); }); </script> </head> <body> <div id="dd" style="width:600px;height:400px;background:black"></div> <div id="box" style="width:100px;height:100px;background:#ccc;"> <span id="pox">内容部分</span> </div> </body> </html>
posted on
