sortablejs. 列表之间的拖动
时间: 2023-12-12 18:31:27 浏览: 54
要实现列表之间的拖动,可以使用 SortableJS 库。这个库可以让你轻松地实现拖放排序功能,支持多种框架和库,包括 React、Angular、Vue 等等。
使用 SortableJS 的基本步骤如下:
1. 引入 SortableJS 库和样式文件:
```html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.13.0/Sortable.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.13.0/Sortable.min.js"></script>
```
2. 创建一个列表,并为其添加一个 ID:
```html
<ul id="my-list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
```
3. 初始化 SortableJS:
```javascript
var mylist = document.getElementById("my-list");
new Sortable(mylist);
```
这样就可以实现基本的列表拖放排序了。当然,还有很多其他的配置选项可以使用,比如限制拖放的方向、设置拖放时的样式等等。
相关问题
sortablejs. 列表之间
可以使用 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>
```
sortablejs 两个列表相互拖拽
sortablejs是一个用于实现拖拽排序功能的JavaScript库。通过结合sortablejs和antdesign-vue,可以实现两个列表相互拖拽排序的效果。具体实现方法如下:
1. 首先,在Vue组件中引入sortablejs库,并在methods中定义initSortable方法。
2. 在initSortable方法中,使用querySelector获取到需要实现拖拽排序的列表元素,然后使用Sortable.create方法创建一个Sortable实例。
3. 在Sortable.create方法的配置选项中,设置handle为'.ant-table-row',表示只有带有.ant-table-row类的元素才能进行拖拽操作。
4. 可以根据实际需求,在onUpdate、onStart、onAdd、onRemove等回调函数中编写相应的逻辑代码,来处理拖拽过程中的更新操作。
5. 通过调用initSortable方法,对需要实现拖拽排序的列表进行初始化。
以下是一个示例代码:
```javascript
import Sortable from 'sortablejs'
export default {
methods: {
initSortable() {
var that = this
var el = this.$el.querySelector('.sort-table tbody')
Sortable.create(el, {
handle: '.ant-table-row',
animation: 150,
group: {
name: 'name',
pull: true,
put: true
},
onUpdate: function (evt) {
// 拖拽更新回调函数的逻辑代码
},
onStart: function (evt) {
// 开始拖拽回调函数的逻辑代码
},
onAdd: function (evt) {
// 添加元素回调函数的逻辑代码
},
onRemove: function (evt) {
// 移除元素回调函数的逻辑代码
}
})
}
}
}
```