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

dragslot.js插件的github地址为：https://github.com/AshleyLv/dragslot