上文已经提到过了jQuery EasyUI插件引用一般我们常用的有两种方式(排除easyload加载方式),所以本篇要总结的拖拽组件同样有两种方式加载:
(1),使用类加载方式:
& lt; div id=昂凶印眂lass=癳asyui-draggable”比;
内容部分
& lt;/div>
之前
(2), JS加载调用
同样上文也说了,使用类属性不利于我们拓展组件的其他属性,所以我们使用JS调用的方式,后面的文章也是使用JS调用的方式。
该组件有若干属性,方法及触发事件,不在这里列举了,都放到代码示例里并且加上注释了。
示例:
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt; title> UI< jQuery容易;/title>
& lt;元charset=" utf - 8 "/比;
& lt;脚本type=" text/javascript " src=" https://www.yisu.com/zixun/easyui/jquery.min.js "祝辞& lt;/script>
& lt;脚本type=" text/javascript " src=" https://www.yisu.com/zixun/easyui/jquery.easyui.min.js "祝辞& lt;/script>
& lt;脚本type=" text/javascript " src=" https://www.yisu.com/zixun/easyui/locale/easyui-lang-zh_CN.js "祝辞& lt;/script>
& lt;链接rel="样式表" type=" text/css " href=" https://www.yisu.com/zixun/easyui/themes/default/easyui.css " rel=巴獠縩ofollow”/比;
& lt;链接rel="样式表" type=" text/css " href=" https://www.yisu.com/zixun/easyui/themes/icon.css " rel=巴獠縩ofollow”/比;
& lt; script>
$(函数(){
.fn.draggable.defaults.cursor=谋尽?美元//* * * * *采用这种方式重写默认值
$(" #箱”).draggable ({//回复:真的,默认值为假设置为真正的时候拖动结束后返回起始位置//光标:“文本”,定义拖动时指针的样式//处理:“#痘”,开始拖动时的句柄,就是点击哪里可以拖动,参数是一个金桥选择器//禁用:真的,设置为真正的时候,禁止拖动//边:0,//轴:‘v’,不写:任意拖动值为v:垂直拖动值为h:水平拖动//代理:“克隆”,当使用“克隆”的时候则克隆一个替代元素拖动,如果指定一个函数,则可以自定义替代元素。
△:50,//被拖动元素对应于当前光标位置X
δY: 50,//被拖动元素对应于当前光标位置Y
代理:函数(源){
var p=$ (' & lt; div祝辞');
p.html($(源). html ()) .appendTo(身体的);
返回p;
}/* *
可触发的事件:
比;
& lt;跨度id=岸弧弊４悄谌莶糠? lt;/span>
& lt;/div>
& lt;/body>
& lt;/html>之前
点击下载源代码:jQuery EasyUI拖拖动组件
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
