如何在element-ui中使用拖拽排序?

最近有一个需求是需要对一些有序标签进行排序 , 项目使用的是element-ui的vue, 由于element-ui本身并不具备拖拽功能, 因此选用了vuedraggable插件进行实现.

效果图如下:

拖拽排序展示.gif

Vue.Draggable

文档地址:https://github.com/SortableJS/Vue.Draggable

使用方法:

yarn add vuedraggable
npm i -S vuedraggable

代码示例: (我在项目中的示例,使用到了el-tag)

        <draggable v-model="form.childProject" @end="onDragEnd">
            <el-tag
              v-for="(tag, index) in form.childProject"
              :key="index"
            >
              {{ tag.name }}
            </el-tag>
          </draggable>

       //方法中  onDragEnd方法在拖拽结束的时候回调打印出顺序,会跟随动作进行重新排序
      onDragEnd() {
      console.log(this.form.childProject, "form.childProject");
    },

拖拽在项目中还有很多的使用场景 , 可以方便一些排序的操作 , 文档中还有一些其他的使用场景.