前言：很多時候我們都有這樣的一種需求：在一個數(shù)據(jù)列表中，對數(shù)據(jù)進行排序，然后這個排序又希望用戶體驗好一點，頁面不刷新，也不需要彈出修改數(shù)據(jù)的彈出層，直接在列表中拖拽數(shù)據(jù)實現(xiàn)排序。那么這樣的需求可以如何實現(xiàn)呢？這就需要用到前端的拖拽插件了，前端拖拽插件有很多，這里選擇的是Sortable插件。

下載插件

Sortable是可以實現(xiàn)DOM元素拖拽效果的前端插件，它的包很小，簡單易用，功能齊全，效果很好，它不依賴jQuery庫，是使用原生JavaScript開發(fā)的。最重要的是它可以讓我們完成列表數(shù)據(jù)拖拽排序的需求。

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

開始使用

在頁面初始化成功后，創(chuàng)建出Sortable對象，然后傳入需要拖拽的DOM元素，該DOM元素應該是一個列表，這樣，該列表下的數(shù)據(jù)就能拖拽了:

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

完成拖拽排序

然后結合Sortable的其他屬性和方法，調(diào)用后臺程序就能完成拖拽排序的需求。在初始化Sortable代碼的基礎上進行改造，加上拖拽數(shù)據(jù)事件，觸發(fā)了該事件就把拖拽后的數(shù)據(jù)傳到后臺，然后由后臺程序完成數(shù)據(jù)重新排序:

//Sortable對象提取出來
var sortable;
    $(function () {
        //給需要做拖拽排序的dom對象實例化出拖拽排序的對象,并添加數(shù)據(jù)拖拽事件
        var el = $("#items")[0];
        sortable = new Sortable(el,{
            onUpdate:updateSort
        });
    })

    //更新數(shù)據(jù)排序方法
    function updateSort() {
        //調(diào)用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 定義是否列表單元是否可以在列表容器內(nèi)進行拖拽排序；

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，當排序的容器是個可滾動的區(qū)域，拖放可以引起區(qū)域滾動


事件：

onChoose：function 列表單元被選中的回調(diào)函數(shù)

onStart：function 列表單元拖動開始的回調(diào)函數(shù)

onEnd：function 列表單元拖放結束后的回調(diào)函數(shù)

onAdd：function 列表單元添加到本列表容器的回調(diào)函數(shù)

onUpdate：function 列表單元在列表容器中的排序發(fā)生變化后的回調(diào)函數(shù)

onRemove：function 列表元素移到另一個列表容器的回調(diào)函數(shù)

onFilter：function 試圖選中一個被filter過濾的列表單元的回調(diào)函數(shù)

onMove：function 當移動列表單元在一個列表容器中或者多個列表容器中的回調(diào)函數(shù)

onClone：function 當創(chuàng)建一個列表單元副本的時候的回調(diào)函數(shù)


事件對象：

事件對象在各個函數(shù)中略有不同，可通過輸出對象查看對象的屬性，下面簡單列舉幾個：

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

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

item：HTMLElement--被移動的列表單元

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

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

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


方法

option(name[,value])

獲得或者設置項參數(shù)，使用方法類似于jQuery用法，沒有第二個參數(shù)為獲得option中第一個參數(shù)所對應的值，有第二個參數(shù)時，將重新賦給第一個參數(shù)所對應的值；

toArray()

序列化可排序的列表單元的data-id（可通過配置項中dataIdAttr修改）放入一個數(shù)組，并返回這個數(shù)組中

sort()

通過自定義列表單元的data-id的數(shù)組對列表單元進行排序

save()

destroy()