一、创建拖动组件
0.Draggable组件不依赖于其他组件
1.使用标签创建
<div class="easyui-draggable" id="box" style="width: 200px; height: 100px; left: 100px; background: orange">拖动组件</div>
2.使用js创建
<div id="box" style="width: 200px; height: 100px; left: 100px; background: orange">拖动组件</div><script> $(function () { $("#box").draggable(); });</script>
二、属性
1.revert：如果设置为true，在拖动停止时元素将返回起始位置
<script> $(function () { $("#box").draggable({ revert:true }); });</script>
2.cursor：拖动时的CSS指针样式
$(function () { $("#box").draggable({ cursor: "text" });});3.handle：开始拖动的句柄
<div id="box" style="width: 200px; height: 100px; left: 100px; background: orange"> <div id="pox">拖动组件</div></div><script> $(function () { $("#box").draggable({ handle: "#pox" }); });</script>
4.disabled：如果设置为true，则停止拖动
<script> $(function () { $("#box").draggable({ disabled: true }); });</script>
5.edge：可以在其中拖动的容器的宽度
<script> $(function () { $("#box").draggable({ edge: 20 }); });</script>
6.axis：定义元素移动的轴向，可用值有：'v'或'h'，当没有设置或设置为null时可同时在水平和垂直方向上拖动
<script> $(function () { $("#box").draggable({ axis: 'h' }); });</script>
7.proxy：在拖动的时候使用的代理元素，当使用'clone'的时候，将使用该元素的一个复制元素来作为替代元素
<script> $(function () { $("#box").draggable({ proxy: "clone", deltaX: 50, deltaY: 50 }); });</script>
三、事件
1.onBeforeDrag：在拖动之前触发，返回false将取消拖动
<script> $(function () { $("#box").draggable({ onBeforeDrag: function (e) { alert("拖动前触发"); //return false; } }); });</script>
2.onStartDrag：在目标对象开始被拖动时触发
<script> $(function () { $("#box").draggable({ onStartDrag: function (e) { alert("拖动开始触发"); } }); });</script>
3.onDrag：在拖动过程中触发，当不能再拖动时返回false
<script> $(function () { $("#box").draggable({ onDrag: function () { alert("拖动过程触发"); } }); });</script>
4.onStopDrag：在拖动停止时触发
<script> $(function () { $("#box").draggable({ onStopDrag: function () { alert("拖动结束触发"); } }); });</script>
四、方法
1.disable：禁止拖动
<script> $(function () { $("#box").draggable({ }); $("#box").draggable("disable"); });</script>
2.enable：允许拖动
<script> $(function () { $("#box").draggable({ }); $("#box").draggable("enable"); });</script>
3.options：返回属性对象
<script> $(function () { $("#box").draggable({ }); console.log($("#box").draggable("options")); });</script>
4.proxy：如果代理属性被设置则返回该拖动代理元素
<script> $(function () { $("#box").draggable({ proxy: function (source) { //source是id为box的div对象 //console.log(source); var p = $("<div style='width:400px;height:200px;border:1px dashed red'></div>"); //p.appendTo("body"); p.html($(source).html()).appendTo("body"); return p; } }); });</script>
五、重写默认值对象
<script> $(function () { //所有该组件，都是文本指针 $.fn.draggable.defaults.cursor = "text"; $("#box").draggable({ }); });</script>