前端实现拖拽排序效果

<template>
  <div>
    <div>dom拖拽功能的实现</div>
    <div class="link-add">
      <div class="formTitle">流程步骤</div>
      <div class="link-add-list">
        <div
          class="test_wrapper"
          @dragover="dragover($event)"
          v-if="
            recordProcessList &&
            recordProcessList.length > 0
          "
        >
          <transition-group class="transition-wrapper" name="sort">
            <div
              v-for="(item, itemIndex) in recordProcessList"
              :key="item.sort"
              :draggable="true"
              @dragstart="dragstart(item)"
              @dragenter="dragenter(item, $event)"
              @dragend="dragend(item, $event)"
              @dragover="dragover($event)"
              style="transition: transform 0.3s"
            >
              <el-input
                v-model="item.name"
                @click.native="clickLinkItem(itemIndex)"
                class="link-add-list-detail"
                :class="{ activeItem: itemIndex == digit }"
              >
                <el-button slot="prepend" icon="el-icon-s-unfold"></el-button>
                <el-button
                  slot="append"
                  icon="el-icon-delete"
                  @click="delLinkItem(itemIndex)"
                ></el-button>
              </el-input>
            </div>
          </transition-group>
        </div>
        <div
          v-else
          style="
            height: 60px;
            text-align: center;
            line-height: 50px;
            color: #909399;
          "
        >
          <span>暂未新增任何环节</span>
        </div>
        <el-button
          size="mini"
          style="width: 100%; background-color: #e8ecef"
          @click="addLink"
          ><i class="el-icon-circle-plus"></i>&nbsp;新增</el-button
        >
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      recordProcessList: [
        {
          sort: 1,
          name: '步骤1',
        },
        {
          sort: 2,
          name: '步骤2',
        },
        {
          sort: 3,
          name: '步骤3',
        },
      ],
      digit: 0,
      //开始排序时按住的旧数据
      oldData: '',
      // 拖拽过程的数据
      newData: '',
      obj:{
        name:'未命名',sort:''
      }
    }
  },
  methods: {
    //点击单条环节
    clickLinkItem(index) {
      this.digit = index
    },
    dragstart(value) {
      this.oldData = value
      console.log(value, '这是旧的数据')
    },
    // 记录移动过程中信息
    dragenter(value, e) {
      this.newData = value
      console.log(value, '这是移动过程中的数据')
      e.preventDefault()
    },
    // 拖拽最终操作
    dragend(value, e) {
      if (this.oldData !== this.newData) {
        let oldIndex = this.recordProcessList.indexOf(this.oldData)
        let newIndex = this.recordProcessList.indexOf(this.newData)
        console.log(oldIndex, '老的', newIndex, '新的')
        let newItems = [...this.recordProcessList]
        // 删除老的节点
        newItems.splice(oldIndex, 1)
        // 在列表中目标位置增加新的节点
        newItems.splice(newIndex, 0, this.oldData) //在位置newIndex位置添加一个this.oldData,并删除0个数据
        this.recordProcessList = [...newItems]
      }
    },
    // 拖动事件（主要是为了拖动时鼠标光标不变为禁止）
    dragover(e) {
      e.preventDefault()
    },
    //点击单条环节
    clickLinkItem(index) {
      this.digit = index
    },
    //设置sort
    setSort() {
      this.recordProcessList.forEach((element, eleInedx) => {
        element.sort = eleInedx + 1;
      });
    },
    // 添加环节
    addLink() {
      this.setSort()
      //方法1：
      this.obj.sort = this.recordProcessList.length + 1
      this.recordProcessList.push(
        JSON.parse(JSON.stringify(this.obj))
      );
      //方法2：
      // this.recordProcessList.push({
      //   name:'未命名',sort:this.recordProcessList.length + 1
      // })
      console.log(this.recordProcessList)
    },
    //删除单个环节
    delLinkItem(index) {
      if (this.recordProcessList.length == 1) {
        alert('已经是最后一条了哦')
        return
      }
      if (index > this.digit) {
        this.digit = 0;
      }
      this.recordProcessList.splice(index, 1)
    },
  },
}
</script>
<style lang="scss" scoped>
.link-add {
  width: 300px;
  background-color: white;
  margin-right: 6px;
  padding: 8px 15px;
  &-list {
    padding: 8px;
  }
  .activeItem {
    background-color: #e8ecef;
  }
}
</style>