拖拽排序外掛sortable
簡介
Sortable.js是一款輕量級的拖放排序列表的js外掛(雖然體積小,但是功能很強大)
特點
-
支援觸屏裝置和大部分瀏覽器(IE9以下的就不支援了,原因都懂得)
-
可以從一個列表容器中拖拽一個列表單元到其他容器或本列表容器中進行排序
-
移動列表單元時有css動畫
-
支援拖放操作和可選擇的文字(這句我也沒理解,大概意思就是對原生的拖放進行拓展了)
-
非常友善的滾動效果
-
基於原生HTML5中的拖放API
-
支援多種框架(angular、vue、react等)
-
支援所有的css框架,像Bootstrap
-
簡單的API,方便使用
-
CDN
-
不依賴jQuery
<script src="../../js/Sortable.min.js"></script>
<ul id="items">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
可以通過Sorable物件中的create方法建立var el = document.getElementById('items');
var sortable = Sortable.create(el,{});
也可以通過新建個Sortable物件來建立
var sortable = new Sortable(el, {})
例項中dom結構中用到的是ul(無序列表),當然也可以用其他的元素來構造例如使用div等配置項
屬性: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 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) 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) { ... }, // 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) { evt.oldIndex; // element's old index within parent evt.newIndex; // element's new index within parent }, // Element is dropped into the list from another list onAdd: function (/**Event*/evt) { var itemEl = evt.item; // dragged HTMLElement evt.from; // previous list // + indexes from onEnd }, // Changed sorting within list onUpdate: function (/**Event*/evt) { var itemEl = evt.item; // dragged HTMLElement // + indexes from onEnd }, // Called by any change to the list (add / update / remove) onSort: function (/**Event*/evt) { // same properties as onUpdate }, // Element is removed from the list into another list onRemove: function (/**Event*/evt) { // same properties as onUpdate }, // 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
string:命名,個人建議用元素id就行,用處是為了設定可以拖放容器時使用,在array中的put的設定中再做介紹;
array:[name,pull,put]
name:同string的方法,
pull:pull用來定義從這個列表容器移動出去的設定,true/false/'clone'/function
true:列表容器內的列表單元可以被移出;
false:列表容器內的列表單元不可以被移出;
'clone':列表單元移出,移動的為該元素的副本;
function:用來進行pull的函式判斷,可以進行復雜邏輯,在函式中return false/true來判斷是否移出;
put:put用來定義往這個列表容器放置列表單元的的設定,true/false/['foo','bar']/function
true:列表容器可以從其他列表容器內放入列表單元;
false:與true相反;
['foo','bar']:這個可以是一個字串或者是字串的陣列,代表的是group配置項裡定義的name值;
function:用來進行put的函式判斷,可以進行復雜邏輯,在函式中return false/true來判斷是否放入;
-
sort:boolean 定義是否列表單元是否可以在列表容器內進行拖拽排序;
-
delay:number 定義滑鼠選中列表單元可以開始拖動的延遲時間;
-
disabled:boolean 定義是否此sortable物件是否可用,為true時sortable物件不能拖放排序等功能,為false時為可以進行排序,相當於一個開關;
-
animation:number 單位:ms,定義排序動畫的時間;
-
handle:selector 格式為簡單css選擇器的字串,使列表單元中符合選擇器的元素成為拖動的手柄,只有按住拖動手柄才能使列表單元進行拖動;
-
filter:selector 格式為簡單css選擇器的字串,定義哪些列表單元不能進行拖放,可設定為多個選擇器,中間用“,”分隔;
-
draggable:selector 格式為簡單css選擇器的字串,定義哪些列表單元可以進行拖放
-
ghostClass:selector 格式為簡單css選擇器的字串,當拖動列表單元時會生成一個副本作為影子單元來模擬被拖動單元排序的情況,此配置項就是來給這個影子單元新增一個class,我們可以通過這種方式來給影子元素進行編輯樣式;
-
chosenClass:selector 格式為簡單css選擇器的字串,當選中列表單元時會給該單元增加一個class;
-
forceFallback:boolean 如果設定為true時,將不使用原生的html5的拖放,可以修改一些拖放中元素的樣式等;
-
fallbackClass:string 當forceFallback設定為true時,拖放過程中滑鼠附著單元的樣式;
-
scroll:boolean 預設為true,當排序的容器是個可滾動的區域,拖放可以引起區域滾動
事件: -
onChoose:function 列表單元被選中的回撥函式
-
onStart:function 列表單元拖動開始的回撥函式
-
onEnd:function 列表單元拖放結束後的回撥函式
-
onAdd:function 列表單元新增到本列表容器的回撥函式
-
onUpdate:function 列表單元在列表容器中的排序發生變化後的回撥函式
-
onRemove:function 列表元素移到另一個列表容器的回撥函式
-
onFilter:function 試圖選中一個被filter過濾的列表單元的回撥函式
-
onMove:function 當移動列表單元在一個列表容器中或者多個列表容器中的回撥函式
-
onClone:function 當建立一個列表單元副本的時候的回撥函式
事件物件:
事件物件在各個函式中略有不同,可通過輸出物件檢視物件的屬性,下面簡單列舉幾個:
-
to:HTMLElement--移動到列表容器
-
from:HTMLElement--來源的列表容器
-
item:HTMLElement--被移動的列表單元
-
clone:HTMLElement--副本的列表單元
-
oldIndex:number/undefined--在列表容器中的原序號
-
newIndex:number/undefined--在列表容器中的新序號
方法
-
option(name[,value])
獲得或者設定項引數,使用方法類似於jQuery用法,沒有第二個引數為獲得option中第一個引數所對應的值,有第二個引數時,將重新賦給第一個引數所對應的值; -
closest
沒理解 -
toArray()
序列化可排序的列表單元的data-id(可通過配置項中dataIdAttr修改)放入一個數組,並返回這個陣列中 -
sort()
通過自定義列表單元的data-id的陣列對列表單元進行排序 -
save()
-
destroy()