Sortable中怎么實(shí)現(xiàn)一個(gè)拖放排序插件

Sortable中怎么實(shí)現(xiàn)一個(gè)拖放排序插件，相信很多沒(méi)有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策，為此本文總結(jié)了問(wèn)題出現(xiàn)的原因和解決方法，通過(guò)這篇文章希望你能解決這個(gè)問(wèn)題。

　　Sortable.js是一款輕量級(jí)的拖放排序列表的js插件（雖然體積小，但是功能很強(qiáng)大）

　　Sortable.js特點(diǎn)

　　支持觸屏設(shè)備和大部分瀏覽器（IE9以下的就不支持了，原因都懂得）

　　可以從一個(gè)列表容器中拖拽一個(gè)列表單元到其他容器或本列表容器中進(jìn)行排序

　　移動(dòng)列表單元時(shí)有css動(dòng)畫

　　支持拖放操作和可選擇的文本（這句我也沒(méi)理解，大概意思就是對(duì)原生的拖放進(jìn)行拓展了）

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

　　基于原生html5中的拖放API

　　支持多種框架（angular、vue、react等）

　　支持所有的css框架，像Bootstrap

　　簡(jiǎn)單的API，方便使用

　　CDN

　　不依賴jQuery

　　Sortable.js示例代碼：

　　//Simplelist

　　varlist=document.getElementById("my-ui-list");

　　newSortable(list);//That'sall.

　　//Grouping

　　varfoo=document.getElementById("foo");

　　newSortable(foo,{group:"omega"});

　　varbar=document.getElementById("bar");

　　newSortable(bar,{group:"omega"});

　　//Or

　　varcontainer=document.getElementById("multi");

　　varsort=newSortable(container,{

　　handle:".tile__title",//Restrictssortstartclick/touchtothespecifiedelement

　　draggable:".tile",//Specifieswhichitemsinsidetheelementshouldbesortable

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

　　varitem=evt.item;//thecurrentdraggedHTMLElement

　　}

　　});

　　//..

　　sort.destroy();

看完上述內(nèi)容，你們掌握Sortable中怎么實(shí)現(xiàn)一個(gè)拖放排序插件的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！