当前位置：首页 > news >正文

Vue+SortableJs实现拖拽排序

news 2025/11/30 23:45:07

需求说明

需求是需要首列固定、除首尾列外可进行拖动排序并保存数据

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)}})}