sortablejs. 列表之间
时间: 2023-12-12 14:31:28 浏览: 71
Sortable是一个JavaScript库用于在现代浏览器上重新排序拖放列表
可以使用 SortableJS 库来实现列表之间的拖拽排序。该库支持多种框架和库,如 jQuery、React、Vue 等。
使用 SortableJS 的基本步骤如下:
1. 引入 SortableJS 库和样式文件。
2. 在 HTML 中创建需要排序的列表。
3. 使用 SortableJS 创建一个 Sortable 实例,并指定需要排序的列表。
4. 可以通过配置选项来自定义排序行为,如禁止某些元素拖拽、限制拖拽范围等。
5. 可以监听 Sortable 实例的事件,如拖拽开始、拖拽结束等。
下面是一个简单的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>SortableJS Demo</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.13.0/Sortable.min.css">
</head>
<body>
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.13.0/Sortable.min.js"></script>
<script>
var list = document.getElementById('list');
var sortable = new Sortable(list);
</script>
</body>
</html>
```
阅读全文