var sortable =newSortable(el,{group:"name",// or { name: "...", pull: [true, false, 'clone', array], put: [true, false, array] }sort:true,// boolean 定義是否列表單元是否可以在列表容器內(nèi)進(jìn)行拖拽排序delay:0,// number 定義鼠標(biāo)選中列表單元可以開(kāi)始拖動(dòng)的延遲時(shí)間；touchStartThreshold:0,// px, how many pixels the point should move before cancelling a delayed drag eventdisabled:false,// boolean 定義是否此sortable對(duì)象是否可用，為true時(shí)sortable對(duì)象不能拖放排序等功能，為false時(shí)為可以進(jìn)行排序，相當(dāng)于一個(gè)開(kāi)關(guān)；store:null,// @see Storeanimation:150,// ms, number 單位：ms，定義排序動(dòng)畫(huà)的時(shí)間easing:"cubic-bezier(1, 0, 0, 1)",// Easing for animation. Defaults to null. See https://easings.net/ for examples.handle:".my-handle",// 格式為簡(jiǎn)單css選擇器的字符串，使列表單元中符合選擇器的元素成為拖動(dòng)的手柄，只有按住拖動(dòng)手柄才能使列表單元進(jìn)行拖動(dòng)filter:".ignore-elements",// 過(guò)濾器，不需要進(jìn)行拖動(dòng)的元素preventOnFilter:true,// 在觸發(fā)過(guò)濾器`filter`的時(shí)候調(diào)用`event.preventDefault()`draggable:".item",// 允許拖拽的項(xiàng)目類(lèi)名ghostClass:"sortable-ghost",// drop placeholder的css類(lèi)名chosenClass:"sortable-chosen",// 被選中項(xiàng)的css 類(lèi)名dragClass:"sortable-drag",// 正在被拖拽中的css類(lèi)名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',// 拖拽方向 (默認(rèn)情況下會(huì)自動(dòng)判斷方向)forceFallback:false,// 忽略 HTML5拖拽行為，強(qiáng)制回調(diào)進(jìn)行fallbackClass:"sortable-fallback",// 當(dāng)使用forceFallback的時(shí)候，被復(fù)制的dom的css類(lèi)名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},// 元素未被選中的時(shí)候（從選中到未選中）onUnchoose:function(/**Event*/evt){// same properties as onEnd},// 開(kāi)始拖拽的時(shí)候onStart:function(/**Event*/evt){evt.oldIndex;// element index within parent},// 結(jié)束拖拽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},// 元素從一個(gè)列表拖拽到另一個(gè)列表onAdd:function(/**Event*/evt){// same properties as onEnd},// 列表內(nèi)元素順序更新的時(shí)候觸發(fā)onUpdate:function(/**Event*/evt){// same properties as onEnd},// 列表的任何更改都會(huì)觸發(fā)onSort:function(/**Event*/evt){// same properties as onEnd},// 元素從列表中移除進(jìn)入另一個(gè)列表onRemove:function(/**Event*/evt){// same properties as onEnd},// 試圖拖拽一個(gè)filtered的元素onFilter:function(/**Event*/evt){var itemEl = evt.item;// HTMLElement receiving the `mousedown|tapstart` event.},// 拖拽移動(dòng)的時(shí)候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一個(gè)元素的時(shí)候觸發(fā)onClone:function(/**Event*/evt){var origEl = evt.item;var cloneEl = evt.clone;},// 拖拽元素改變位置的時(shí)候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}});
