jQuery UI是一個流行的JavaScript庫,提供了許多UI組件和實用程序。其中一個組件是Sortable,可以實現對列表元素的拖拽排序。
$(function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
});
以上代碼啟用Sortable組件,并對列表元素應用它。disableSelection方法確保在拖拽時不會選擇文本。
以下是Sortable的基本HTML結構,每個元素都是一個li:
- Item 1
- Item 2
- Item 3
當你在頁面上拖拽一個列表元素時,Sortable會檢測并更新列表的順序。你也可以添加其他選項,例如revert,可以讓元素返回原始位置,如果拖拽不成功。
$(function() {
$( "#sortable" ).sortable({
revert: true
});
$( "#sortable" ).disableSelection();
});
當然,Sortable還提供了許多事件和方法,以方便自定義和控制您的排序。查看官方文檔,了解更多如何使用Sortable:
https://jqueryui.com/sortable/