EasyUI基础入门之Draggable(拖拽)

最新推荐文章于 2022-11-29 15:58:42 发布

LCore

最新推荐文章于 2022-11-29 15:58:42 发布

阅读量9.4k

点赞数 1

分类专栏：【JQuery EasyUI】文章标签： easyui draggable

本文链接：https://blog.csdn.net/lcore/article/details/28145839

版权

本文介绍了EasyUI中的Draggable插件，用于实现控件的拖拽效果。详细讲解了Draggable的属性，如'cursor'，事件和使用方法，包括通过HTML标记和JS脚本创建。并提供了官方Demo链接，适合初学者入门。

摘要由CSDN通过智能技术生成

前面学习了easyui基础的解析器,加载器。对于他们入门阶段我们只需简单的了解下即可，毕竟先阶段并不会太过深入。接下来根据easyui官网文档的顺序安排学习下Draggable插件。

Draggable是easyui中用于实现拖拽功能的一个插件。利用它，我们可以实现控件的拖拽效果。

Draggble覆盖默认值$.fn.draggable.defaults。

下面看看官网对于Draggable的描述吧。

其属性如下表所示:

名称	类型	描述	默认值
proxy	string,function	在拖动过程中会被使用到的一个代理元素,当设置为‘clone’,一个clone的元素作为代理对象使用，如果定义的是一个函数,该函数必须返回一个JQuery对象,下面展示如何创建一个简单的代理对象. $('dragitem').draggable({ proxy:function(source){ var p = $('<div style="border:1px solid=#ccc;width:80px"></div>'); p.html($(source).html()).appendTo('body'); return p; } });	null
revert	boolean	如果设置为true,当拖动结束后,该元素将回到开始的位置	false
cursor	string	当拖动的时候,一个css cursor(鼠标的样式),这里需要说明的是eas