最近有一個(gè)需求是需要對(duì)一些有序標(biāo)簽進(jìn)行排序 , 項(xiàng)目使用的是element-ui的vue, 由于element-ui本身并不具備拖拽功能, 因此選用了vuedraggable插件進(jìn)行實(shí)現(xiàn).

效果圖如下:

拖拽排序展示.gif

Vue.Draggable

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

使用方法:

yarn add vuedraggable
npm i -S vuedraggable

代碼示例: (我在項(xiàng)目中的示例,使用到了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方法在拖拽結(jié)束的時(shí)候回調(diào)打印出順序,會(huì)跟隨動(dòng)作進(jìn)行重新排序
      onDragEnd() {
      console.log(this.form.childProject, "form.childProject");
    },

拖拽在項(xiàng)目中還有很多的使用場(chǎng)景 , 可以方便一些排序的操作 , 文檔中還有一些其他的使用場(chǎng)景.