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-checkbox
        title="固定列不可操作"
        v-model="defaultCheckItem"
        label="固定列不可拖动"
        size="large"
        :disabled="true"/>
    </div>
    <div id="drag-content">
      <div
        v-for="item in hdAllSettings"
        class="header-content flex-spw-center draggable-cursor"
        :key="item.id">
        <el-checkbox
          v-model="item.check"
          :label="item.label"
          @change="hdSettingsChange(item)"
          size="large"/>
        <img
          src="../../../assets/images/common/ic-drag.png"
          class="my-handle"
          width="16"/>
      </div>
    </div>
    <div class="header-content">
      <el-checkbox
        title="固定列不可操作"
        v-model="defaultCheckItem"
        label="操作"
        size="large"
        :disabled="true"/>
    </div>
  </el-scrollbar>
</div>

js

dragSort(): void {
    const dragsHtml = document.getElementById('drag-content') as any
    this.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设置为新的位置sort
          this.hdAllSettings[evt.oldIndex].sort = evt.newIndex
          for (let i = evt.oldIndex + 1; i <= evt.newIndex; i++) {
            this.hdAllSettings[i].sort = this.hdAllSettings[i].sort - 1
          }
        }
        // 向上移动
        if (evt.oldIndex > evt.newIndex) {
          // 移动的节点sort设置为新的位置sort
          this.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)
      }
    })
  }