大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
这篇文章主要介绍了jQuery EasyUI中拖拽事件的使用方法,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。
成都创新互联是专业的郊区网站建设公司,郊区接单;提供成都网站制作、成都网站建设、外贸营销网站建设,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行郊区网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!jQueryEasyUI中的拖拽事件通过给它设置代理元素使其拖拽、可设置拖动元素相对于x.y轴拖动,可设置拖拽何时停止等效果
jQuery中的easyui是一个非常好用的插件,它虽然使用简单方便,但是它的功能确十分强大,今天将向大家介绍如何使用easyui插件实现基本的拖动和放置,有一定的参考价值,希望对大家有所帮助。
【推荐课程:jQueryEasyUI教程】
Draggable(拖拽)
Draggable是easyui中用于实现拖拽功能的一个插件,通过它我们可以实现对控件的拖拽效果。
它具有以下属性值:
属性名 | 含义 |
proxy | 指拖动时要使用的代理元素,设置为clone时,克隆元素将被用作代理;如果指定一个函数,它必须返回一个 jQuery 对象。 |
revert | 是一个boolean值,设置为 true时表示拖动结束后元素将返回它的开始位置。 (默认值为false) |
cursor | 拖动时的 css 光标,默认值为move |
deltaX | 指的是拖动的元素相对于当前光标的 X 轴的位置,默认值为null |
deltaY | 指的是拖动的元素相对于当前光标的 Y 轴位置,默认值为null |
handle | 指启动可拖动元素的处理,默认值为null |
disabled | 是一个boolean值,如果设置为 true,则停止可拖动,默认值为false |
edge | 指能够在其中开始可拖动的拖动宽度,默认值为0 |
axis | 指定义拖动元素可在其上移动的轴,可用的值是 'v' 或 'h',当设为 null,将会沿着 'v' 和 'h' 的方向移动 |
案例分析:
通过三个div元素来启用它们的拖动和放置
外部引用必须有的插件
HTML与CSS代码
box1box2box3
效果图:
设置box1元素为可拖动的
$('#box1').draggable();
效果图:
对于box2通过给原来的元素的代理(proxy)创建一个clone值,让其可以拖动
$('#box2').draggable({ proxy:'clone' });
效果图:
第三个box我们设置元素只能在v轴上拖动:
$("#box3").draggable({ axis: 'v' })
效果图:
感谢你能够认真阅读完这篇文章,希望小编分享jQuery EasyUI中拖拽事件的使用方法内容对大家有帮助,同时也希望大家多多支持创新互联建站,关注创新互联网站制作公司行业资讯频道,遇到问题就找创新互联建站,详细的解决方法等着你来学习!