通过jquery-ui中的sortable来实现拖拽排序
时间: 2024-02-21 19:00:00 浏览: 22
可以通过以下步骤来实现通过jquery-ui中的sortable来实现拖拽排序:
1. 首先,引入jquery和jquery-ui的库文件。
2. 在HTML中创建一个列表,列表项的顺序需要进行拖拽排序。
3. 使用jQuery选择器选中该列表,并使用sortable()方法来使其可拖拽排序。
4. 根据需要,可以设置sortable()方法的参数,如axis、containment、cursor等。
5. 使用update事件来获取排序后的列表项顺序。
下面是一段示例代码:
HTML代码:
```html
<ul id="sortable">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
```
JavaScript代码:
```javascript
$(function() {
$("#sortable").sortable({
update: function(event, ui) {
// 获取排序后的列表项顺序
var order = $(this).sortable("toArray");
console.log(order);
}
});
$("#sortable").disableSelection();
});
```
在上述代码中,我们使用sortable()方法使id为"sortable"的列表可拖拽排序,并使用update事件来获取排序后的列表项顺序。同时,我们使用disableSelection()方法来禁用文本选择功能。