列表数据拖拽排序

前言：很多时候我们都有这样的一种需求：在一个数据列表中，对数据进行排序，然后这个排序又希望用户体验好一点，页面不刷新，也不需要弹出修改数据的弹出层，直接在列表中拖拽数据实现排序。那么这样的需求可以如何实现呢？这就需要用到前端的拖拽插件了，前端拖拽插件有很多，这里选择的是Sortable插件。

下载插件

Sortable是可以实现DOM元素拖拽效果的前端插件，它的包很小，简单易用，功能齐全，效果很好，它不依赖jQuery库，是使用原生JavaScript开发的。最重要的是它可以让我们完成列表数据拖拽排序的需求。

下载地址：https://github.com/RubaXa/Sortable
官方DEMO：http://rubaxa.github.io/Sortable/

开始使用

在页面初始化成功后，创建出Sortable对象，然后传入需要拖拽的DOM元素，该DOM元素应该是一个列表，这样，该列表下的数据就能拖拽了:

$(function () {
        //给需要做拖拽排序的dom对象实例化出拖拽排序的对象
        var el = $("#items")[0];
        Sortable sortable = new Sortable(el);
})

完成拖拽排序

然后结合Sortable的其他属性和方法，调用后台程序就能完成拖拽排序的需求。在初始化Sortable代码的基础上进行改造，加上拖拽数据事件，触发了该事件就把拖拽后的数据传到后台，然后由后台程序完成数据重新排序:

//Sortable对象提取出来
var sortable;
    $(function () {
        //给需要做拖拽排序的dom对象实例化出拖拽排序的对象,并添加数据拖拽事件
        var el = $("#items")[0];
        sortable = new Sortable(el,{
            onUpdate:updateSort
        });
    })

    //更新数据排序方法
    function updateSort() {
        //调用Sortable对象的toArray方法，该方法的作用看下面属性和方法的详细介绍
        var ids = sortable.toArray();
        $.ajax({
            url:"xxx",
            type:"POST",
            data:JSON.stringify(ids),
            contentType:"application/json",
            dataType:"json"
        })
    }

其他属性和方法

属性：

group：string or array

sort：boolean 定义是否列表单元是否可以在列表容器内进行拖拽排序；

delay：number 定义鼠标选中列表单元可以开始拖动的延迟时间；

disabled：boolean 定义是否此sortable对象是否可用，为true时sortable对象不能拖放排序等功能，为false时为可以进行排序，相当于一个开关；

animation：number 单位：ms，定义排序动画的时间；

handle：selector 格式为简单css选择器的字符串，使列表单元中符合选择器的元素成为拖动的手柄，只有按住拖动手柄才能使列表单元进行拖动；

filter：selector 格式为简单css选择器的字符串，定义哪些列表单元不能进行拖放，可设置为多个选择器，中间用“，”分隔；

draggable：selector 格式为简单css选择器的字符串，定义哪些列表单元可以进行拖放

ghostClass：selector 格式为简单css选择器的字符串，当拖动列表单元时会生成一个副本作为影子单元来模拟被拖动单元排序的情况，此配置项就是来给这个影子单元添加一个class，我们可以通过这种方式来给影子元素进行编辑样式；

chosenClass：selector 格式为简单css选择器的字符串，当选中列表单元时会给该单元增加一个class；

forceFallback：boolean 如果设置为true时，将不使用原生的html5的拖放，可以修改一些拖放中元素的样式等；

fallbackClass：string 当forceFallback设置为true时，拖放过程中鼠标附着单元的样式；

scroll：boolean 默认为true，当排序的容器是个可滚动的区域，拖放可以引起区域滚动


事件：

onChoose：function 列表单元被选中的回调函数

onStart：function 列表单元拖动开始的回调函数

onEnd：function 列表单元拖放结束后的回调函数

onAdd：function 列表单元添加到本列表容器的回调函数

onUpdate：function 列表单元在列表容器中的排序发生变化后的回调函数

onRemove：function 列表元素移到另一个列表容器的回调函数

onFilter：function 试图选中一个被filter过滤的列表单元的回调函数

onMove：function 当移动列表单元在一个列表容器中或者多个列表容器中的回调函数

onClone：function 当创建一个列表单元副本的时候的回调函数


事件对象：

事件对象在各个函数中略有不同，可通过输出对象查看对象的属性，下面简单列举几个：

to：HTMLElement--移动到列表容器

from：HTMLElement--来源的列表容器

item：HTMLElement--被移动的列表单元

clone：HTMLElement--副本的列表单元

oldIndex：number/undefined--在列表容器中的原序号

newIndex：number/undefined--在列表容器中的新序号


方法

option(name[,value])

获得或者设置项参数，使用方法类似于jQuery用法，没有第二个参数为获得option中第一个参数所对应的值，有第二个参数时，将重新赋给第一个参数所对应的值；

toArray()

序列化可排序的列表单元的data-id（可通过配置项中dataIdAttr修改）放入一个数组，并返回这个数组中

sort()

通过自定义列表单元的data-id的数组对列表单元进行排序

save()

destroy()