本文主要是介绍Vue+SortableJs实现拖拽排序，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
需求说明
需求是需要首列固定、除首尾列外可进行拖动排序并保存数据
SortableJs中文地址
SortableJs
实现说明
- 针对首尾列固定SortableJs提供了一个配置，该配置虽然可实现首尾列不可拖动，但是在拖动其他元素到首尾列时位置仍被调换，所以我想到基于html结构进行控制（曾经看到一篇文章 还可使用另一种做法 就是首位可拖动 但拖动后通过数据控制其恢复到原位 变相的未发生变化）
filter: ".ignore-elements", // 过滤器，不需要进行拖动的元素
- 怎么通过html结构进行控制呢？其实也很简单，就是将需要拖拽的内容统一放到一个块元素中，这样我们通过获取dom结构即可创建Sortable对象。
- Sortable关键配置（详细可参考SortableJs中文网）
disabled: false, // 是否开启拖拽
ghostClass: 'sortable-ghost', //拖拽样式
animation: 150, // 拖拽延时，效果更好看
handle: ".my-handle", // ※※※ 拖动手柄 可以自定义拖动图标 仅拖动图标时才能拖动该元素
filter: ".ignore-elements", // 那些元素不能拖动 上面已经讲过了
还有几个生命周期函数 会很重要 详细参考文档吧
- 主要数据交换逻辑其实在生命周期函数中完成，但是有个注意点页面元素发生了位置交换 实际数据顺序并未发生变化 所以在拖拽后在数据处理后要进行排序
不啰嗦上代码
html
<div class="hd-settings-content h-content" v-loading="loadSettings"><el-scrollbar style="height: calc(100vh - 421px);"><div class="header-content"><el-checkboxtitle="固定列不可操作"v-model="defaultCheckItem"label="固定列不可拖动"size="large":disabled="true"/></div><div id="drag-content"><divv-for="item in hdAllSettings"class="header-content flex-spw-center draggable-cursor":key="item.id"><el-checkboxv-model="item.check":label="item.label"@change="hdSettingsChange(item)"size="large"/><imgsrc="../../../assets/images/common/ic-drag.png"class="my-handle"width="16"/></div></div><div class="header-content"><el-checkboxtitle="固定列不可操作"v-model="defaultCheckItem"label="操作"size="large":disabled="true"/></div></el-scrollbar>
</div>
js
dragSort(): void {const dragsHtml = document.getElementById('drag-content') as anythis.sortableObj = new Sortable(dragsHtml, {disabled: false, // 是否开启拖拽ghostClass: 'sortable-ghost', //拖拽样式animation: 150, // 拖拽延时，效果更好看handle: ".my-handle",filter: ".ignore-elements",preventOnFilter: true,sort: true,onEnd: (evt: any) => {// 数据交换 evt.oldIndex evt.newIndex// 未发生移动if (evt.oldIndex === evt.newIndex) {return}// 向下移动if (evt.oldIndex < evt.newIndex) {// 移动的节点sort设置为新的位置sortthis.hdAllSettings[evt.oldIndex].sort = evt.newIndexfor (let i = evt.oldIndex + 1; i <= evt.newIndex; i++) {this.hdAllSettings[i].sort = this.hdAllSettings[i].sort - 1}}// 向上移动if (evt.oldIndex > evt.newIndex) {// 移动的节点sort设置为新的位置sortthis.hdAllSettings[evt.oldIndex].sort = this.hdAllSettings[evt.oldIndex].sort - (evt.oldIndex - evt.newIndex)for (let i = evt.newIndex; i < evt.oldIndex; i++) {this.hdAllSettings[i].sort = this.hdAllSettings[i].sort + 1}}this.hdAllSettings.sort((o1: any, o2: any) => o1.sort - o2.sort)}})}
这篇关于Vue+SortableJs实现拖拽排序的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
