easyui Draggable组件实现拖动效果

easyui做为一个封装了JQusey的UI插件，其实还是蛮好用的，至少省了像我这种渣渣很多时间。
Draggable的加载方式有两种：
1，通过class加载，如下：

<div id="box" class="easyui-draggable"></div>

通过JS加载，如下：

$（"#box"）.draggable（）;

以上两点需要注意的是不管是"easyui-draggable",还是draggable 都是固定的，他们都是通过调用easyui已经写好的函数，来实现jQuery效果的。
Draggable的属性：
revert    当值为true时，拖动停止时返回起始位置，可以到处拖。
revert : boolean,
axis 限制拖动的方向，水平"h"？垂直"v"？这个和 revert组合起来比较有意思，设置拖动方向为
垂直的话就跟微信，微博刷新消息一样。
axis : String/"v"/"h",
proxy 克隆，就是拖动的时候要拖动的对象不变，然后在鼠标上复制一个要拖动的对象，当然也
可以是其他的，可以触发function。
proxy : null/String/function,
然后还有很多其他的属性，觉得并不是特别有趣。
cursor : move/String ,     //指定拖动时候指针的CSS样式变得美美哒
deltaX : null/number,
deltaY : null/number,    //被拖动的元素对应于当前光标位置的x,y 就是给被   拖动元素与光标一个距离
handle : null/selector    //开始拖动的句柄   手柄！只能用手柄拖动！对的！
disabled : boolean        //设置为true是，不能拖动当先绑定的元素
edge : number             //可以在其中拖动的容器的宽度从容器的上下左右往里算，就像一个矩形里面包着一个矩形，然后里面那只有鼠标放在里面矩形的时候元素才能被拖动

例子：

$（"#box"）.draggable（{revert : true,cursor: "text",handle : "#pox",disabled : false,edge : 50,axis :"v",proxy : "clone",deltaX: 10,deltaY : 10,proxy: function（source）{console.log（"呵呵哒！"）;}}）;

Draggable的事件：
onBeforeDrag 拖动之前触发，返回false将取消拖动

onBeforeDrag : function （e）{alert（"拖动之前触发"）;return false;}

onStartDrag 拖动时触发

onStartDrag : function（e）{alert（"拖动时触发"）;}

onDrag 拖动过程中触发，不能拖动事返回false

onDrag : function（e）{alert（"拖动过程触发"）;}

onDrag 停止拖动时触发

onStopDrag : function （e）{alert（"在拖动停止时触发"）;}

Draggable 方法列表
options 返回属性对象

console.log（$（"#box"）.draggable（"options"））;

proxy 如果代理属性被设置则返回该拖动代理元素

console.log（$（"#box"）.draggable（"proxy"））;

enable 可以被拖动

$（"#box"）.draggable（"enable"）;

disable 禁止被拖动

$（"#box"）.draggable（"disable"）;

我们来看个简单的例子

<pre class="brush:java;">html> <meta charset="UTF-8"><title>Basic Draggable - 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> <h2>Basic Draggable</h2><p>Move the boxes below by clicking on it with mouse.</p><div id="dd" class="easyui-draggable" data-options="handle:"#title"" style="width:100px;height:100px;"><div id="title" style="background:#ccc;width:100px;height:100px;">容器里面的内容</div></div><script>$（function （） { $（"#title"）.draggable（{proxy: function （a） {var a = $（"<div class="proxy_div">你拖我干啥</div>"）;a.appendTo（"body"）;return a;},cursor: "pointer",edge: "6"}）;}）;</script></pre><br><br>

以上差不多就是Easyui 1.2.5 Draggable的全部属性，事件、方法和示例了, 如果有什么不对的话，欢迎评论，一起讨论和赐教。