html列表拖拽排序插件,JS拖拽排序插件Sortable.js用法实例分析

本文实例讲述了JS拖拽排序插件Sortable.js用法。分享给大家供大家参考，具体如下：

最近由于项目功能设计的原因，需要对table中的行实现拖拽排序功能，找来找去发现Sortable.js能很好的满足这个需求，而且它还是开源的，于是乎就开始学习使用Sortable.js，再然后就有了这篇文章。

特点：

轻量级但功能强大

移动列表项时有动画

支持触屏设备和大多数浏览器(IE9及以下除外)

支持单个列表容器内部拖拽排序，也支持两个列表容器互相拖拽排序

支持拖放操作和可选择的文本

非常友善的滚动效果

基于原生HTML5中的拖放API

支持多种框架(Angular、Vue、React等)

支持所有的CSS框架，如：Bootstrap

简单的API，方便调用

CDN

不依赖于jQuery

运行效果如下图所示：

单个列表容器内部拖拽排序

$(document).ready(function () {

var ul = document.getElementById("infos");

var sortable = new Sortable(ul, {

handle: "input,li",//设置li、input支持拖拽

animation: 150,//设置动画时长

// Element dragging started

onStart: function (/**Event*/evt) {

evt.oldIndex; // element index within parent，此处指的是li的索引值

},

// Element dragging ended

onEnd: function (/**Event*/evt) {

var lis = $("#infos li");

//拖拽完毕后重新设置序号，使其连续

for (var i = 0; i < lis.length; i++) {

var no = $(lis[i]).find("input:eq(0)");

no.val(i + 1);

}

}

});

});

li{

cursor:pointer;

padding-bottom:5px;

list-style:none;

}

• --请选择--

  objective

  proposition

• --请选择--

  eliminate

  alige

• --请选择--

  optimize

  deploy

两个列表容器相互拖拽排序

$(document).ready(function () {

var infosOne = document.getElementById("infosOne");

var sortableOne = new Sortable(infosOne, {

group: "guo",//若需要在两个列表容器间拖拽排序，那group的值必须相同

handle: "input,li",//设置li、input支持拖拽

animation: 150,//设置动画时长

// Element dragging started