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/