sortable 拖拽排序
时间: 2023-11-09 20:20:13 浏览: 67
Sortable.js是一个用于实现拖拽排序的JavaScript库。它可以让我们通过拖动元素来改变它们的顺序。引用中提到,Sortable.js可以实现同组内上下拖动元素,也可以实现不同组内互相拖动元素。在这里,我们主要讨论的是组内上下拖动的情况。
引用提供了一个示例代码,展示了如何使用Sortable.js来保存和恢复元素的顺序。在代码中,通过设置store参数,可以定义获取和保存元素顺序的方法。get方法用于获取元素的顺序,在初始化期间调用一次。set方法用于保存元素的顺序,在项目被拖动后调用。
引用中的示例代码展示了如何使用Sortable.js的methods选项来处理拖拽排序。在代码中,通过创建Sortable实例,并指定拖拽结束时的处理函数,可以实现拖拽排序的功能。
综上所述,Sortable.js是一个可以实现拖拽排序的库,通过设置不同的参数和方法,可以实现不同的拖拽排序效果,包括同组内上下拖动和保存恢复功能。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>
相关问题
avue使用Sortable实现拖拽排序
好的,下面是在 Avue 中使用 Sortable 实现拖拽排序的具体步骤:
1. 安装 sortablejs 库
在命令行中运行以下命令安装 sortablejs 库:
```
npm install sortablejs --save
```
2. 引入 sortablejs 库
在需要使用拖拽排序的组件中,引入 sortablejs 库:
```javascript
import Sortable from 'sortablejs'
```
3. 初始化 Sortable
在组件的 mounted 钩子函数中,初始化 Sortable:
```javascript
mounted () {
this.sortable = Sortable.create(this.$refs.list, {
onEnd: this.sortEnd
})
},
methods: {
sortEnd (event) {
// 拖拽结束后的逻辑处理
}
}
```
其中,`this.$refs.list` 是需要排序的元素的父元素,`onEnd` 是拖拽结束时触发的回调函数。
4. 销毁 Sortable 实例
在组件销毁时,需要销毁 Sortable 实例:
```javascript
beforeDestroy () {
this.sortable.destroy()
}
```
这样就可以在 Avue 中使用 Sortable 实现拖拽排序了。
需要注意的是,`sortablejs` 库是基于原生的拖拽事件实现的,因此在拖拽时可能会出现一些兼容性问题。如果需要在老旧的浏览器中使用,可以考虑使用其他的拖拽库。
sortable排序
在使用sortable.js进行排序时,页面元素会重新排序,但实际的数组数据并没有进行排序,仍然保持原来的顺序。如果在排序过程中同时修改了数组,会导致排序结果混乱。为了在提交时得到排序后的新数组,可以按照id的顺序对原数组进行排序。可以按照以下步骤进行操作:
1. 首先引入sortable.js,并在节点渲染完毕后添加以下JS代码:
```
let body = document.getElementById('formAdd');
var sortable = Sortable.create(body);
var order = sortable.toArray();
console.log(order); //[3,2,1]
```
2. 在提交时,根据id的顺序给原数组排序,得到排序后的新数组。可以使用以下代码实现:
```
let arrvideo = {};
this.videoList.map((item) => {
let index = this.videoListarr.indexOf(item.lessonNumberId);
arrvideo[index = item;
});
```
这样就可以得到根据id顺序排列的新数组arrvideo。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [sortable的sort方法对表单等任意节点进行排序](https://blog.csdn.net/ckq_1104/article/details/88054805)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [sortable 拖拽排序,获取排序后的数据](https://blog.csdn.net/samll_redhat/article/details/122319327)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)