jQuery Easy UI Draggable(拖动)组件
Posted lxjshuju
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery Easy UI Draggable(拖动)组件相关的知识，希望对你有一定的参考价值。
上文已经提到过了 jQuery EasyUI插件引用一般我们经常使用的有两种方式（排除easyload载入方式），所以本篇要总结的Draggable组件相同有两种方式载入：
（1）、使用class载入方式：
<div id="box" class="easyui-draggable" style="width:400px;height:200px;background:red;">
内容部分
</div>
（2）、JS 载入调用
$(‘#box‘).draggable();
相同上文也说了，使用class属性不利于我们拓展组件的其它属性，所以我们使用JS调用的方式。后面的文章也是使用JS调用的方式。
该组件有若干属性、方法及触发事件，不在这里列举了，都放到代码演示样例里而且加上凝视了。
演示样例：
<!DOCTYPE html> <html> <head> <title>jQuery Easy UI</title> <meta charset="UTF-8" /> <script type="text/javascript" src="easyui/jquery.min.js"></script> <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script> <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js" ></script> <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" /> <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" /> <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) { var p = $('<div style="width:400px;height:200px;border:1px dashed #ccc">'); p.html($(source).html()).appendTo('body'); return p; } /** 可触发的事件： onBeforeDrag : function (e) { alert('拖动前触发！
'); }, onBeforeDrag : function (e) { //return false; }, 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> <div id="box" style="width:400px;height:200px;background:orange;"> <span id="pox">内容部分</span> </div> </body> </html>
以上是关于jQuery Easy UI Draggable(拖动)组件的主要内容，如果未能解决你的问题，请参考以下文章
如何使用jQuery Draggable和Droppable实现拖拽功能
jQuery-ui-draggable 将像素值转换为百分比