vue项目实现列表可拖拽序号动态更改

首先需要下载 sortablejs

 <ul class="list">
          <li class="list-item" v-for="(item, index) in showList" :key="`floor_${index}`">
            <div class="item-left">{{ index+1 }}</div>
            <div class="item-content">{{item.title}}</div>
            <el-select v-model="item.free" style=" width:90px;height:30px" placeholder="请选择">
              <el-option
                v-for="(item,index) in item.labels"
                :key="index"
                :label="item.value"
                :value="item.label"
              ></el-option>
            </el-select>
            <div class="item-remove" @click="deleteItem(item)">删除</div>
          </li>
        </ul>

import Sortable from "sortablejs";
mounted() {
    this.rowDrop();//在这里进行调用
  },
// 拖拽事件
    rowDrop() {
      const tbody = document.querySelector(".list");
      const _this = this;
      Sortable.create(tbody, {
        onEnd({ newIndex, oldIndex }) {
          const currRow = _this.showList.splice(oldIndex, 1)[0];
          _this.showList.splice(newIndex, 0, currRow);
          // 截止上面为止，数组已经进行了更换，但是会看到视图没有更新，所以就进行了数组清空重新赋值
          const newArray = _this.showList.slice(0);
          _this.showList = [];
          _this.$nextTick(() => {
            _this.showList = newArray;
            console.log(_this.showList);
          });
        },
      });
    },