功能強大的JavaScript 拖拽庫 SortableJS

官網：http://www.sortablejs.com/

示例：

配置項：

var sortable = new Sortable(el, {group: "name", // or { name: "...", pull: [true, false, 'clone', array], put: [true, false, array] }sort: true, // boolean 定義是否列表單元是否可以在列表容器內進行拖拽排序delay: 0, // number 定義鼠標選中列表單元可以開始拖動的延遲時間；touchStartThreshold: 0, // px, how many pixels the point should move before cancelling a delayed drag eventdisabled: false, // boolean 定義是否此sortable對象是否可用，為true時sortable對象不能拖放排序等功能，為false時為可以進行排序，相當于一個開關；store: null, // @see Storeanimation: 150, // ms, number 單位：ms，定義排序動畫的時間easing: "cubic-bezier(1, 0, 0, 1)", // Easing for animation. Defaults to null. See https://easings.net/ for examples.handle: ".my-handle", // 格式為簡單css選擇器的字符串，使列表單元中符合選擇器的元素成為拖動的手柄，只有按住拖動手柄才能使列表單元進行拖動filter: ".ignore-elements", // 過濾器，不需要進行拖動的元素preventOnFilter: true, // 在觸發過濾器`filter`的時候調用`event.preventDefault()`draggable: ".item", // 允許拖拽的項目類名ghostClass: "sortable-ghost", // drop placeholder的css類名chosenClass: "sortable-chosen", // 被選中項的css 類名dragClass: "sortable-drag", // 正在被拖拽中的css類名dataIdAttr: 'data-id',swapThreshold: 1, // Threshold of the swap zoneinvertSwap: false, // Will always use inverted swap zone if set to trueinvertedSwapThreshold: 1, // Threshold of the inverted swap zone (will be set to swapThreshold value by default)direction: 'horizontal', // 拖拽方向 (默認情況下會自動判斷方向)forceFallback: false, // 忽略 HTML5拖拽行為，強制回調進行fallbackClass: "sortable-fallback", // 當使用forceFallback的時候，被復制的dom的css類名fallbackOnBody: false, // 將cloned DOM 元素掛到body元素上。fallbackTolerance: 0, // Specify in pixels how far the mouse should move before it's considered as a drag.scroll: true, // or HTMLElementscrollFn: function(offsetX, offsetY, originalEvent, touchEvt, hoverTargetEl) { ... }, // if you have custom scrollbar scrollFn may be used for autoscrollingscrollSensitivity: 30, // px, how near the mouse must be to an edge to start scrolling.scrollSpeed: 10, // pxbubbleScroll: true, // apply autoscroll to all parent elements, allowing for easier movementdragoverBubble: false,removeCloneOnHide: true, // Remove the clone element when it is not showing, rather than just hiding itemptyInsertThreshold: 5, // px, distance mouse must be from empty sortable to insert drag element into itsetData: function (/** DataTransfer */dataTransfer, /** HTMLElement*/dragEl) {dataTransfer.setData('Text', dragEl.textContent); // `dataTransfer` object of HTML5 DragEvent},// 元素被選中onChoose: function (/**Event*/evt) {evt.oldIndex; // element index within parent},// 元素未被選中的時候（從選中到未選中）onUnchoose: function(/**Event*/evt) {// same properties as onEnd},// 開始拖拽的時候onStart: function (/**Event*/evt) {evt.oldIndex; // element index within parent},// 結束拖拽onEnd: function (/**Event*/evt) {var itemEl = evt.item; // dragged HTMLElementevt.to; // target listevt.from; // previous listevt.oldIndex; // element's old index within old parentevt.newIndex; // element's new index within new parentevt.clone // the clone elementevt.pullMode; // when item is in another sortable: `"clone"` if cloning, `true` if moving},// 元素從一個列表拖拽到另一個列表onAdd: function (/**Event*/evt) {// same properties as onEnd},// 列表內元素順序更新的時候觸發onUpdate: function (/**Event*/evt) {// same properties as onEnd},// 列表的任何更改都會觸發onSort: function (/**Event*/evt) {// same properties as onEnd},// 元素從列表中移除進入另一個列表onRemove: function (/**Event*/evt) {// same properties as onEnd},// 試圖拖拽一個filtered的元素onFilter: function (/**Event*/evt) {var itemEl = evt.item; // HTMLElement receiving the `mousedown|tapstart` event.},// 拖拽移動的時候onMove: function (/**Event*/evt, /**Event*/originalEvent) {// Example: https://jsbin.com/nawahef/edit?js,outputevt.dragged; // dragged HTMLElementevt.draggedRect; // DOMRect {left, top, right, bottom}evt.related; // HTMLElement on which have guidedevt.relatedRect; // DOMRectevt.willInsertAfter; // Boolean that is true if Sortable will insert drag element after target by defaultoriginalEvent.clientY; // mouse position// return false; — for cancel// return -1; — insert before target// return 1; — insert after target},// clone一個元素的時候觸發onClone: function (/**Event*/evt) {var origEl = evt.item;var cloneEl = evt.clone;},// 拖拽元素改變位置的時候onChange: function(/**Event*/evt) {evt.newIndex // most likely why this event is used is to get the dragging element's current index// same properties as onEnd} });

具體使用看官網介紹吧：

官網：http://www.sortablejs.com/

總結

以上是生活随笔為你收集整理的功能强大的JavaScript 拖拽库 SortableJS的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。