一、安装插件Sortable.js

npm i  sortablejs --save
或者
yarn add sortablejs --save

二、引入

/* 引入插件 */
import Sortable from "sortablejs";

三、拖拽区html

key取的随机数--目的为了每次拖拽后重新渲染
id="fieldCtr"取的这个dom一定是最外围的元素（拖拽区域），不能放到循环体内

      <!-- 未显示字段 -->
        <div id="fieldCtr" :key="domKey">
          <div v-for="item in list" :key="item.label">
            <div>{{ item.label }}</div>
          </div>
        </div>

四、初始化

  mounted() {
    this.drag();
  },

五、拖拽事件

    /**
     * 拖拽事件
     */
    drag() {
      const _this = this;
      const wrapperTr = document.getElementById("fieldCtr");
      this.sortable = Sortable.create(wrapperTr, {
        animation: 180,
        delay: 0,
        onEnd: (evt) => {
          // 跳过显示的列数量，如开头我们用了一个多选框，h和序号
          const oldItem = this.list[evt.oldIndex];
          this.list.splice(evt.oldIndex, 1);
          this.list.splice(evt.newIndex, 0, oldItem);
         // 每一次拖拽后都要重绘一次
          _this.reDrawPop();
        },
      });
    },

六、重绘事件

   /**
     * 触发重绘
     */
    reDraw() {
      this.domKey = Math.random();
      this.$nextTick(() => {
        this.drag();
      });
    },