easyui 的draggable使得被声明的元素变的可拖拽。
<!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(){ $("div[name=box1]").draggable({ revert : true,//拖动停止时 返回原位置 cursor : "text",//拖动时鼠标指针的样式 string /move deltaX : 0,//拖动时 容器对应当前光标的位置 x deltaY : 0,//拖动时 容器对应当前光标的位置 y disabled : false,//是否能够拖动 handle : "#text",//指定拖动容器中指定的元素 才能拖动容器 //edge : 10,//指针距离容器的边界的10px之内拖动失效 axis : "h",//对象移动的方向 h代表水平方向 v 垂直方向 proxy : "clone", //function(e){ //var p=$("#box2"); //p.html($(e).html()); //return p; //}, onBeforeDrag : function(e){ //alert("拖动前触发的函数"); //return false; 返回false 则取消拖动 }, onStartDrag : function(e){ //alert('拖动开始时触发'); //return false; }, onDrag : function(e){ //alert("拖动过程中触发"); //return false; }, onStopDrag : function(e){ alert("拖动结束时触发"); //$("#box1").draggable("disable"); 禁止拖动 //$("#box1").draggable("enable"); 禁止拖动 //console.log($("#box1").draggable("proxy"));返回代理元素 console.log($("#box1").draggable("options"));//返回代理元素 } }); //设置对象的默认值 $.fn.draggable.defaults.cursor="text"; }); </script> </head> <body> <div id="box" class="easyui-draggable" style="300px;height:300px;background-color:red;">draggable</div> <div id="box1" class="box1" name="box1" style="300px;height:300px;background-color:yellow;"><span id="text">draggable</span></div> <div id="box2" style="300px;height:300px;background-color:blue;">代理对象</div> </body> </html>