JQuery EasyUI---Draggable( 拖动) 组件
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JQuery EasyUI---Draggable( 拖动) 组件相关的知识，希望对你有一定的参考价值。
学习要点：
1.加载方式
2.属性列表
3.事件列表
4.方法列表
本节重点了解 EasyUI 中 Draggable(拖动)组件的使用方法，这个组件不依赖于其他组件。
一． 加载方式
//class 加载方式 这种方式看起来html代码不干净，会污染html。建议使用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> <script type="text/javascript" src="js/index.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" /> </head> <body> <div id="box" style="width:400px;height:200px;background:orange;"> </div> </body> </html>
//JS 加载调用
//JS 加载调用 $(‘#box‘).draggable();
二． 属性列表
Draggable 属性
属性名 值 说明
Proxy null/string、 function 当使用‘clone‘，则克隆一个替代元素拖动。如果指定一个函数，则自定义替代元素。
revert false/boolean 设置为 true，则拖动停止时返回起始位置
cursor move/string 拖动时的 CSS 指针样式
deltaX null/number 被拖动的元素对应于当前光标位置 x
deltaY null/number 被拖动的元素对应于当前光标位置 y
handle null/selector 开始拖动的句柄
disabled false/boolean 设置为 true，则停止拖动
edge 0/number 可以在其中拖动的容器的宽度
axis null/string 设置拖动为垂直‘v‘，还是水平‘h‘
JS代码
$(‘#box‘).draggable({ revert : true, cursor : ‘text‘, handle : ‘#pox‘, disabled : true, edge : 180, axis : ‘v‘, proxy : ‘clone‘, deltaX : 50, deltaY : 50, proxy : function (source) { var p = $(‘<div style="width:400px;height:200px;border:1px dashed #ccc">‘); p.html($(source).html()).appendTo(‘body‘); return p; } });
三、事件列表
事件名 传参 说明
onBeforeDrag e 拖动之前触发，返回 false 将取消拖动
onStartDrag e 拖动开始时触发
onDrag e 拖动过程中触发，不能拖动时返回 false
onStopDrag e 拖动停止时触发
$(‘#box‘).draggable({ onBeforeDrag : function (e) { alert(‘拖动之前触发！‘); return false; }, onStartDrag : function (e) { alert(‘拖动时触发！‘); }, onDrag : function (e) { alert(‘拖动过程中触发！‘); }, onStopDrag : function (e) { alert(‘在拖动停止时触发！‘); }, });
四． 方法列表
事件名 传参 说明
options none 返回属性对象
proxy none 如果代理属性被设置则返回该拖动代理元素
enable none 允许拖动
disable none 禁止拖动
$(‘#box‘).draggable(‘disable‘); $(‘#box‘).draggable(‘enable‘); console.log($(‘#box‘).draggable(‘options‘));
上面的方法直接是元素绑定draggable之后直接传入相关参数即可
以上是关于JQuery EasyUI---Draggable( 拖动) 组件的主要内容，如果未能解决你的问题，请参考以下文章
easyUI draggable插件使用不当，导致拖动div内部文本框无法输入；设置echarts数据为空时就显示空白，不要动画和文字