您好,登錄后才能下訂單哦!
Sortable中怎么實現一個拖放排序插件,相信很多沒有經驗的人對此束手無策,為此本文總結了問題出現的原因和解決方法,通過這篇文章希望你能解決這個問題。
Sortable.js是一款輕量級的拖放排序列表的js插件(雖然體積小,但是功能很強大)
Sortable.js特點
支持觸屏設備和大部分瀏覽器(IE9以下的就不支持了,原因都懂得)
可以從一個列表容器中拖拽一個列表單元到其他容器或本列表容器中進行排序
移動列表單元時有css動畫
支持拖放操作和可選擇的文本(這句我也沒理解,大概意思就是對原生的拖放進行拓展了)
非常友善的滾動效果
基于原生html5中的拖放API
支持多種框架(angular、vue、react等)
支持所有的css框架,像Bootstrap
簡單的API,方便使用
不依賴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();
看完上述內容,你們掌握Sortable中怎么實現一個拖放排序插件的方法了嗎?如果還想學到更多技能或想了解更多相關內容,歡迎關注億速云行業資訊頻道,感謝各位的閱讀!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。