html列表拖拽排序插件,可对列表自由拖拽排序的jQuery插件

dragslot.js是一款可以对列表自由拖拽排序的jQuery插件。该插件主要的功能是实现了列表项可以在各个列表中相互拖拽. 对于像todo list, 分配任务列表都可以应用这个效果。

使用方法

在页面中引入dragslot.css和dragslot.js文件。

HTML结构

使用该插件的基本HTML结构要求如下：

• drag item 1

• drag item 2

初始化插件

在页面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。关于该插件的问题可以咨询她。她的联系方式有：