当前位置：首页 > 网页特效 > 其他

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

分类：其他日期：2024-05-14 点击(0) 评论(0)

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

简介

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

```html
<link rel="stylesheet" href="css/dragslot.css">
<script type="text/javascript" src="js/dragslot.js"></script>
```
#####  HTML结构
使用该插件的基本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元素加载完毕之后，可以通过下面的方法来初始化该列表拖拽插件。

```html
$('#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：当被拖动的列表项被放下时的回调函数。

web299.com

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

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果