安装插件

npm install vuedraggable -S

引用import draggable from 'vuedraggable'
注册组件components: { draggable },

<draggable v-model="chapters" :options="{animation:200}" @update="datadragEnd">
        <div v-for="(item, index) in chapters" :key="index" class="chapter">
          <div class="chapter-name">
            {{ item.name }}
          </div>
        </div>
</draggable>

    async datadragEnd(evt) {
      evt.preventDefault();
      // console.log('拖动前的索引 :' + evt.oldIndex)
      // console.log('拖动后的索引 :' + evt.newIndex)
      // 遍历数组,将索引值赋值到对应的sort_order上面,完成排序
      let arr = this.chapters;
      let newArr = await arr.map((item, i) => {
        return {
          chapterId: item.chapterId,
          children: item.children,
          name: item.name,
          sort: i,
        };
      });
      console.log(newArr)
      const res = await this.$axios.post(`customer/save_order`, {
        list: newArr
      });
      // console.log(res)
      const {error, message} = res.data;
      if (error == 0) {
        this.$message.success(message);
      }
    },