easyui Draggable组件实现拖动效果
easyui做为一个封装了JQusey的UI插件，其实还是蛮好用的，至少省了像我这种渣渣很多时间。
Draggable的加载方式有两种：
1，通过class加载，如下：
<divid="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('拖动之前触发');
returnfalse;
}
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');
我们来看个简单的例子
<preclass="brush:java;">html>
<metacharset="UTF-8">
<title>BasicDraggable-jQueryEasyUIDemo</title>
<linkrel="stylesheet"type="text/css"href="jquery-easyui-1.3.6/themes/metro/easyui.css">
<linkrel="stylesheet"type="text/css"href="jquery-easyui-1.3.6/themes/icon.css">
<linkrel="stylesheet"type="text/css"href="jquery-easyui-1.3.6/demo/demo.css">
<scripttype="text/javascript"src="jquery-easyui-1.3.6/jquery.min.js"></script>
<scripttype="text/javascript"src="jquery-easyui-1.3.6/jquery.easyui.min.js"></script>
<h2>BasicDraggable</h2>
<p>Movetheboxesbelowbyclickingonitwithmouse.</p>
<divid="dd"class="easyui-draggable"data-options="handle:'#title'"style="width:100px;height:100px;">
<divid="title"style="background:#ccc;width:100px;height:100px;">容器里面的内容</div>
</div>
<script>
$(function(){
$("#title").draggable({
proxy:function(a){
vara=$('<divclass="proxy_div">你拖我干啥</div>');
a.appendTo('body');
returna;
},
cursor:'pointer',
edge:'6'
});
});
</script>
</pre><br><br>
以上差不多就是Easyui1.2.5 Draggable的全部属性，事件、方法和示例了,如果有什么不对的话，欢迎评论，一起讨论和赐教。