var sortable =newSortable(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}});
