sortable.js 拖拽排序及配置項說明

// 拖動排序
$(function() {
    /*排序*/
    //排序
    // Simple list
    var list = document.getElementsByClassName("application-ul")[0];
    new Sortable(list, {
        group: "name",
        animation: 150, //動畫參數
        store: null, // @see Store
        /*   handle: ".BtnMove",*/ // 點擊目標元素開始排序(只能拖拽當前元素)
        draggable: ".application-li", // 指定那些選項需要排序
        // ghostClass: "SortableGhost",

        onStart: function( /**Event*/ evt) { // 拖拽
            var itemEl = evt.item;
            console.log('拖拽1',itemEl)
        },
        onEnd: function( /**Event*/ evt) { // 拖拽
            var itemEl = evt.item;
            console.log('拖拽2',itemEl)
        },
        onAdd: function( /**Event*/ evt) {
            var itemEl = evt.item;
            console.log('拖拽3',itemEl)
        },
        onUpdate: function( /**Event*/ evt) {
            var itemEl = evt.item; // 當前拖拽的html元素
            console.log('拖拽5',itemEl)
        },
        onRemove: function( /**Event*/ evt) {
            var itemEl = evt.item;
            console.log('拖拽6',itemEl)
        }
    });
})

下載地址：https://github.com/RubaXa/Sortable

var defaults = {

 group: Math.random(), //產生一個隨機數 //產生一個隨機數 //改參數是對象有三個兩個參數 pull: 拉, put:放 默認都是是true pull還有一個值是: 'clone', pull: 拉, put:放 設置為false 就不能拖拽了， 如果 pull 這種為'clone'則可以從一個列表中拖拽到另一個列表並且克隆dom節點， name：是兩個或者多個列表拖拽之間的通信，兩個或者三個列表的nea

 sort: true, // 類型：Boolean,值為false時，在自己的拖拽區域不能拖拽，但是可以拖拽到其他區域，true則可以做自己區域拖拽或者其他區域拖拽

 disabled: false, //類型：Boolean 是否禁用拖拽 true 則不能拖拽 默認是true

 store: null, // 用來html5 存儲的 改返回 拖拽的節點的唯一id

 handle: null, //handle 這個參數是設置該標簽，或者該class可以拖拽 但是不要設置 id的節點和子節點相同的tag不然會有bug

 scroll: true, //類型：Boolean，設置拖拽的時候滾動條是否智能滾動。默認為真，則智能滾動，false則不智能滾動

 scrollSensitivity: 30, //滾動的靈敏度,其實是拖拽離滾動邊界的距離觸發事件的距離邊界+-30px的地方觸發拖拽滾動事件，

 scrollSpeed: 10, //滾動速度

 draggable: /[uo]l/i.test(el.nodeName) ? 'li' : '>*',//draggable 判斷拖拽節點的父層是否是ou ul

 ghostClass: 'sortable-ghost', // 排序鏡像class,就是當鼠標拉起拖拽節點的時候添加該class

 chosenClass: 'sortable-chosen', // //為拖拽的節點添加一個class 開始拖拽鼠標按下去的時候 添加該class

 ignore: 'a, img', //a 或者是img

 filter: null, //改參數可以傳遞一個函數，或者字符串，字符串可以是class或者tag，然后用於觸發oFilter函數，這樣可以用來自定義事件等

 animation: 0, //拖拽動畫時間戳

 setData: function (dataTransfer, dragEl) { //設置拖拽傳遞的參數

 dataTransfer.setData('Text', dragEl.textContent);

 },

 dropBubble: false, // 發生 drop事件 拖拽的時候是否阻止事件冒泡

 dragoverBubble: false, //發生 dragover 事件 拖拽的時候是否阻止事件冒泡

 dataIdAttr: 'data-id', //拖拽元素的id 數組

 delay: 0, //延遲拖拽時間, 其實就是鼠標按下去拖拽延遲

 forceFallback: false, // 不詳

 fallbackClass: 'sortable-fallback', // 排序回退class

 fallbackOnBody: false,// 是否把拖拽鏡像節點ghostEl放到body上

 };