dragslot.js是一款可以对列表自由拖拽排序的jQuery插件。该插件主要的功能是实现了列表项可以在各个列表中相互拖拽. 对于像todo list, 分配任务列表都可以应用这个效果。
使用方法
在页面中引入dragslot.css和dragslot.js文件。
<link rel="stylesheet" href="css/dragslot.css"> <script type="text/javascript" src="js/dragslot.js"></script>
HTML结构
使用该插件的基本HTML结构要求如下:
<div class="slot"> <ul class="slot-list"> <li class="slot-item"> <div class="slot-handler"> drag item 1 </div> </li> <li class="slot-item"> <div class="slot-handler"> drag item 2 </div> </li> </ul> </div>
初始化插件
在页面DOM元素加载完毕之后,可以通过下面的方法来初始化该列表拖拽插件。
$('#dragslot').dragslot({ slotItemClass : 'slot-item', placeholderClass : 'placeholder', dragItemClass : 'drag-item', slotListClass : 'slot-list', slotHandlerClass : 'slot-handler', emptySlotClass : 'empty-slot', slotClass : 'slot', slotItem : 'li', slotList : 'ul', dropCallback: function(el){ alert('dragItem : ' + el.dragItemId); } });
配置参数
dragslot.js插件的可用配置参数有:
-
slotItemClass
:被拖拽列表项的css class名称。默认值为"slot-item"。 -
placeholderClass
:被拖拽列表项占位符的class名称。默认为"placeholder"。 -
dragItemClass
:列表项被拖动时添加到列表项的class名称,默认为"drag-item"。 -
slotListClass
:列表的class名称。默认为"slot-list"。 -
slotHandlerClass
:包裹被拖动列表项的容器的class名称,默认为"slot-handler"。 -
emptySlotClass
:空槽的class名称,默认为"empty-slot"。 -
slotClass
:slot的class名称,默认为"slot"。 -
slotItem
:要拖动的html元素,默认是li
元素。 -
slotList
:要拖动的列表,默认是ul
元素。 -
dropCallback
:当被拖动的列表项被放下时的回调函数。
关于作者
dragslot.js插件的作者是Ashley Lv。关于该插件的问题可以咨询她。她的联系方式有:
- QQ:1005019471
- github:https://github.com/AshleyLv
dragslot.js插件的github地址为:https://github.com/AshleyLv/dragslot
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!