jQuery EasyUI Draggable拖动组件
上文已经提到过了jQueryEasyUI插件引用一般我们常用的有两种方式（排除easyload加载方式），所以本篇要总结的Draggable组件同样有两种方式加载：
（1）、使用class加载方式：
<divid="box"class="easyui-draggable"style="width:400px;height:200px;background:red;"> 内容部分 </div>
（2）、JS加载调用
$('#box').draggable();
同样上文也说了，使用class属性不利于我们拓展组件的其他属性，所以我们使用JS调用的方式，后面的文章也是使用JS调用的方式。
该组件有若干属性、方法及触发事件，不在这里列举了，都放到代码示例里并且加上注释了。
示例：
<!DOCTYPEhtml>
<html>
<head>
<title>jQueryEasyUI</title>
<metacharset="UTF-8"/>
<scripttype="text/javascript"src="easyui/jquery.min.js"></script>
<scripttype="text/javascript"src="easyui/jquery.easyui.min.js"></script>
<scripttype="text/javascript"src="easyui/locale/easyui-lang-zh_CN.js"></script>
<linkrel="stylesheet"type="text/css"href="easyui/themes/default/easyui.css"rel="externalnofollow"/>
<linkrel="stylesheet"type="text/css"href="easyui/themes/icon.css"rel="externalnofollow"/>
<script>
$(function(){
$.fn.draggable.defaults.cursor='text';//*****采用这种方式重写默认值
$('#box').draggable({
//revert:true,默认值为false设置为true的时候拖动结束后返回起始位置
//cursor:'text',定义拖动时指针的样式
//handle:'#pox',开始拖动时的句柄,就是点击哪里可以拖动，参数是一个JQ选择器
//disabled:true,设置为true的时候,禁止拖动
//edge:0,
//axis:'v',不写：任意拖动值为v：垂直拖动值为h：水平拖动
//proxy:'clone',当使用'clone'的时候则克隆一个替代元素拖动，如果指定一个函数，则可以自定义替代元素。
deltaX:50,//被拖动元素对应于当前光标位置X
deltaY:50,//被拖动元素对应于当前光标位置Y
proxy:function(source){
varp=$('<divstyle="width:400px;height:200px;border:1pxdashed#ccc">');
p.html($(source).html()).appendTo('body');
returnp;
}
/**
可触发的事件：
onBeforeDrag:function(e){
alert('拖动前触发！');
},
onBeforeDrag:function(e){
//returnfalse;
},
onStartDrag:function(e){
alert('拖动开始触发！');
console.log($('#box').draggable('proxy'));
},
onDrag:function(e){
//alert('拖动过程触发！');
},
onStopDrag:function(e){
alert('拖动结束后触发！');
}
*/
});
//$('#box').draggable('disable');//禁止拖动
//$('#box').draggable('enable');//可以拖动
//alert($('#box').draggable('options'));//返回对象属性
});
</script>
</head>
<body>
<divid="box"style="width:400px;height:200px;background:orange;">
<spanid="pox">内容部分</span>
</div>
</body>
</html>
点击下载源代码：jQueryEasyUIDraggable拖动组件
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。