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

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

html5向上向下兼容插件,Sticky Header-兼容IE8的页面顶部固定jQuery插件
sticky-header.js是一款非常实用的兼容IE8+浏览器的页面顶部固定jQuery插件.该页面顶部固定插件可以通过参数来控制header元素的样式及固定效果,并且提供了丰富的回调函数. 使用 ...
超全超实用的Javascript类库和jQuery插件大全之二：文字处理，表格和列表处理，实用......
为什么80%的码农都做不了架构师?>>> 日期:2012-10-15 来源:GBin1.com 如果你需要解决一些开发中遇到的技术问题的话,很可能会找到一些相关的javasc ...
15款提高表格操作的jQuery插件
table表格由于它的浏览器兼容性和复杂的标签嵌套方式,可以算是添加样式最困难的对象之一了.大多数前端er都把网页中的table标签替换为div,主要就是因为div要比table更容易添加CSS样式 ...
超全超实用的Javascript类库和jQuery插件大全之一：图片，地图和图形
为什么80%的码农都做不了架构师?>>> 日期:2012-10-10 来源:GBin1.com 如果你需要解决一些开发中遇到的技术问题的话,很可能会找到一些相关的javasc ...
分享13个帮助你简化开发的jQuery插件
为什么80%的码农都做不了架构师?>>> 日期:2012-7-23 来源:GBin1.com jQuery的社区力量的重要体现就是jQuery插件,我们每隔一段时间就会在jQ ...
jquery插件课程1 幻灯片、城市选择、日期时间选择、拖放、方向拖动插件
jquery插件课程1 幻灯片.城市选择.日期时间选择.拖放.方向拖动插件一.总结一句话总结:都是jquery插件,都还比较小,参数(配置参数.数据)一般都是通过json传递. 1.插件配置数据 ...
帮助你构建自适应布局的30款优秀 jQuery 插件（上篇）
自适应设计(Responsive Layouts)是时下网页设计领域最热门的话题之一,自适应设计的目标是要让产品界面能够响应用户的行为,根据不同终端设备自动调整尺寸,带给用户良好的使用体验.下面是收集 ...
100个优秀jQuery插件精选
100个优秀jQuery插件精选在2012年里出现了很多很棒的jQuery插件,如结合CSS3的jQuery动画.强大的支持多设备浏览的响应性布局设计.使用视频作为网页设计背景.jQuery图像幻灯 ...
40 个让你的网站更加友好的 jQuery 插件
一个插件的基本功能是执行一个含有元素集合的函数数组.每个方法和jQuery核心组成一个插件,如.fadeOut()或.addClass().一个jQuery插件是一个基本的可以扩充jQuery 原型对 ...
bootstrap jquery 插件简单总结
主要分为 Bootstrap 基本结构.Bootstrap CSS.Bootstrap 布局组件和 Bootstrap 插件几个部分下面是内置的jQuery插件通过data API 调用因 ...

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

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

最新文章

热门文章