本文實(shí)例講述了JS拖拽排序插件Sortable.js用法。分享給大家供大家參考，具體如下：

最近由于項(xiàng)目功能設(shè)計(jì)的原因，需要對(duì)table中的行實(shí)現(xiàn)拖拽排序功能，找來找去發(fā)現(xiàn)Sortable.js能很好的滿足這個(gè)需求，而且它還是開源的，于是乎就開始學(xué)習(xí)使用Sortable.js，再然后就有了這篇文章。

特點(diǎn)：

輕量級(jí)但功能強(qiáng)大

移動(dòng)列表項(xiàng)時(shí)有動(dòng)畫

支持觸屏設(shè)備和大多數(shù)瀏覽器(IE9及以下除外)

支持單個(gè)列表容器內(nèi)部拖拽排序，也支持兩個(gè)列表容器互相拖拽排序

支持拖放操作和可選擇的文本

非常友善的滾動(dòng)效果

基于原生HTML5中的拖放API

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

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

簡(jiǎn)單的API，方便調(diào)用

CDN

不依賴于jQuery

運(yùn)行效果如下圖所示：

單個(gè)列表容器內(nèi)部拖拽排序

$(document).ready(function () {

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

var sortable = new Sortable(ul, {

handle: "input,li",//設(shè)置li、input支持拖拽

animation: 150,//設(shè)置動(dòng)畫時(shí)長(zhǎng)

// 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");

//拖拽完畢后重新設(shè)置序號(hào)，使其連續(xù)

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;

}

• --請(qǐng)選擇--

  objective

  proposition

• --請(qǐng)選擇--

  eliminate

  alige

• --請(qǐng)選擇--

  optimize

  deploy

兩個(gè)列表容器相互拖拽排序

$(document).ready(function () {

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

var sortableOne = new Sortable(infosOne, {

group: "guo",//若需要在兩個(gè)列表容器間拖拽排序，那group的值必須相同

handle: "input,li",//設(shè)置li、input支持拖拽

animation: 150,//設(shè)置動(dòng)畫時(shí)長(zhǎng)

// Element dragging started

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

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

},

// Element dragging ended

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

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

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

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

no.val(i + 1);

}

lis = $("#infosTwo li");

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

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

no.val(i + 1);

}

}

});

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

var sortableTwo = new Sortable(infosTwo, {

group:"guo",//若需要在兩個(gè)列表容器間拖拽排序，那group的值必須相同

handle: "input,li",//設(shè)置li、input支持拖拽

animation: 150,//設(shè)置動(dòng)畫時(shí)長(zhǎng)

// Element dragging started

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

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

},

// Element dragging ended

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

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

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

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

no.val(i + 1);

}

lis = $("#infosTwo li");

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

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

no.val(i + 1);

}

}

});

});

• --請(qǐng)選擇--

  objective

  proposition

• --請(qǐng)選擇--

  eliminate

  alige

• --請(qǐng)選擇--

  optimize

  deploy

---

• --請(qǐng)選擇--

  目標(biāo)任務(wù)

  論題議題

• --請(qǐng)選擇--

  消除排除

  機(jī)敏的敏捷的

• --請(qǐng)選擇--

  優(yōu)化使最優(yōu)化

  發(fā)布部署

常見配置項(xiàng)及事件

var sortable = new Sortable(el, {

group: "name", // or { name: "...", pull: [true, false, clone], put: [true, false, array] }

sort: true, // sorting inside list

delay: 0, // time in milliseconds to define when the sorting should start

touchStartThreshold: 0, // px, how many pixels the point should move before cancelling a delayed drag event

disabled: false, // Disables the sortable if set to true.

store: null, // @see Store

animation: 150, // ms, animation speed moving items when sorting, `0` — without animation

handle: ".my-handle", // Drag handle selector within list items

filter: ".ignore-elements", // Selectors that do not lead to dragging (String or Function)

preventOnFilter: true, // Call `event.preventDefault()` when triggered `filter`

draggable: ".item", // Specifies which items inside the element should be draggable

ghostClass: "sortable-ghost", // Class name for the drop placeholder

chosenClass: "sortable-chosen", // Class name for the chosen item

dragClass: "sortable-drag", // Class name for the dragging item

dataIdAttr: 'data-id',

forceFallback: false, // ignore the HTML5 DnD behaviour and force the fallback to kick in

fallbackClass: "sortable-fallback", // Class name for the cloned DOM Element when using forceFallback

fallbackOnBody: false, // Appends the cloned DOM Element into the Document's Body

fallbackTolerance: 0, // Specify in pixels how far the mouse should move before it's considered as a drag.

scroll: true, // or HTMLElement

scrollFn: function(offsetX, offsetY, originalEvent, touchEvt, hoverTargetEl) { ... }, // if you have custom scrollbar scrollFn may be used for autoscrolling

scrollSensitivity: 30, // px, how near the mouse must be to an edge to start scrolling.

scrollSpeed: 10, // px

setData: function (/** DataTransfer */dataTransfer, /** HTMLElement*/dragEl) {

dataTransfer.setData('Text', dragEl.textContent); // `dataTransfer` object of HTML5 DragEvent

},

// Element is chosen

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

evt.oldIndex; // element index within parent

},

// Element dragging started

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

evt.oldIndex; // element index within parent

},

// Element dragging ended

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

var itemEl = evt.item; // dragged HTMLElement

evt.to; // target list

evt.from; // previous list

evt.oldIndex; // element's old index within old parent

evt.newIndex; // element's new index within new parent

},

// Element is dropped into the list from another list

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

// same properties as onEnd

},

// Changed sorting within list

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

// same properties as onEnd

},

// Called by any change to the list (add / update / remove)

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

// same properties as onEnd

},

// Element is removed from the list into another list

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

// same properties as onEnd

},

// Attempt to drag a filtered element

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

var itemEl = evt.item; // HTMLElement receiving the `mousedown|tapstart` event.

},

// Event when you move an item in the list or between lists

onMove: function (/**Event*/evt, /**Event*/originalEvent) {

// Example: http://jsbin.com/tuyafe/1/edit?js,output

evt.dragged; // dragged HTMLElement

evt.draggedRect; // TextRectangle {left, top, right и bottom}

evt.related; // HTMLElement on which have guided

evt.relatedRect; // TextRectangle

originalEvent.clientY; // mouse position

// return false; — for cancel

},

// Called when creating a clone of element

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

var origEl = evt.item;

var cloneEl = evt.clone;

}

});

屬性

group：string or array

sort：boolean 定義是否列表單元是否可以在列表容器內(nèi)進(jìn)行拖拽排序；

delay：number 定義鼠標(biāo)選中列表單元可以開始拖動(dòng)的延遲時(shí)間；

disabled：boolean 定義是否此sortable對(duì)象是否可用，為true時(shí)sortable對(duì)象不能拖放排序等功能，為false時(shí)為可以進(jìn)行排序，相當(dāng)于一個(gè)開關(guān)；

animation：number 單位：ms，定義排序動(dòng)畫的時(shí)間；

handle：selector 格式為簡(jiǎn)單css選擇器的字符串，使列表單元中符合選擇器的元素成為拖動(dòng)的手柄，只有按住拖動(dòng)手柄才能使列表單元進(jìn)行拖動(dòng)；

filter：selector 格式為簡(jiǎn)單css選擇器的字符串，定義哪些列表單元不能進(jìn)行拖放，可設(shè)置為多個(gè)選擇器，中間用“，”分隔；

draggable：selector 格式為簡(jiǎn)單css選擇器的字符串，定義哪些列表單元可以進(jìn)行拖放

ghostClass：selector 格式為簡(jiǎn)單css選擇器的字符串，當(dāng)拖動(dòng)列表單元時(shí)會(huì)生成一個(gè)副本作為影子單元來模擬被拖動(dòng)單元排序的情況，此配置項(xiàng)就是來給這個(gè)影子單元添加一個(gè)class，我們可以通過這種方式來給影子元素進(jìn)行編輯樣式；

chosenClass：selector 格式為簡(jiǎn)單css選擇器的字符串，當(dāng)選中列表單元時(shí)會(huì)給該單元增加一個(gè)class；

forceFallback：boolean 如果設(shè)置為true時(shí)，將不使用原生的html5的拖放，可以修改一些拖放中元素的樣式等；

fallbackClass：string 當(dāng)forceFallback設(shè)置為true時(shí)，拖放過程中鼠標(biāo)附著單元的樣式；

scroll：boolean 默認(rèn)為true，當(dāng)排序的容器是個(gè)可滾動(dòng)的區(qū)域，拖放可以引起區(qū)域滾動(dòng)

事件：

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

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

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

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

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

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

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

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

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

事件對(duì)象：

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

to：HTMLElement--移動(dòng)到列表容器

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

item：HTMLElement--被移動(dòng)的列表單元

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

oldIndex：number/undefined--在列表容器中的原序號(hào)

newIndex：number/undefined--在列表容器中的新序號(hào)

方法

option(name[,value])

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

closest

返回滿足selector條件的元素集合中的第一個(gè)項(xiàng)

toArray()

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

sort()

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

save()

destroy()

PS：這里再為大家推薦一款關(guān)于排序的演示工具供大家參考：

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

總結(jié)

以上是生活随笔為你收集整理的html列表拖拽排序插件,JS拖拽排序插件Sortable.js用法实例分析的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。