vuedraggable 实现两个列表拖拽、删除、编辑

1. 不多说直接看图片明了：（线上项目）

2.开始上代码：

左边代码结构，为模板库 templateList  是组件

<el-col :span="6" style="margin-right: 15px;">
    <div class="title">
        <h1>模板库</h1>
        <span>可选中模板拖拽至页面中</span>
    </div>
    <div class="draggableList">
        <draggable v-model="templateList" class="list-group" v-bind="dragOptions1">
            <transition-group>
             <div v-for="item in templateList" :key="item.localFloorName" class="wrap">
                 <el-card shadow="hover">
                    <img :src="item.img" alt="" class="cardImg" />
                  </el-card>
                </div>
            </transition-group>
        </draggable>
    </div>
</el-col>

3.右边结构

 

<el-col :span="6" style="margin-right: 15px;">
          <div class="title">
            <h1>页面编辑</h1>
            <el-link type="primary" @click="setup">设置预览用户</el-link>
          </div>
          <div class="draggableList">
            <draggable v-model="listRight" class="list-group" v-bind="dragOptions2" @add="updateHandler" @update="rightEnd">
              <div v-for="(item, key) in listRight" :key="key" class="wrap" :class="{ 'current-select': item === componentData }">
                <el-card shadow="hover">
                  <div class="imIwrap" v-if="item">
                    <div @click="editCompnent(item)" v-for="res in visualization" :key="res.id">
                      <component v-if="item.floorType === res.id" :dataInfo.sync="item" :is="res.path" />
                    </div>
                    <!-- <img :src="item.img" alt="" @click="editCompnent(item)" class="cardImg" /> -->
                    <i class="el-icon-delete delet" @click="deletComponents(key, item)"></i>
                    <i class="el-icon-top up" v-if="item.floorType !== 1 && item.floorType !== 13 && hasUpArrow(key)" @click="up(item, key)"></i>
                    <i class="el-icon-bottom down" v-if="item.floorType !== 1 && item.floorType !== 13 && hasDownArrow(key)" @click="down(item, key)"></i>
                  </div>
                </el-card>
              </div>
            </draggable>
          </div>
        </el-col>

computed: {
    dragOptions1() {
      return {
        animation: 0,
        group: {
          name: 'description',
          pull: 'clone',
          put: false
        },
        ghostClass: 'ghost'
      }
    },
    dragOptions2() {
      return {
        animation: 0,
        group: 'description'
      }
    }
  },

/**
     * 删除某个楼层
     *
     */
    async deletComponents(v, item) {
      try {
        await this.deleteFloorByIdFun(item.floorId)
        await this.initData()
      } catch (err) {
        console.log(err)
      }
    },
    /**
     * 上移楼层
     *
     */
    async up(data, index) {
      // TODO： 边界情况处理 楼层索引和orderVal值的关系
      console.log(data, index)
      await this.modifyAppPageFloorOrderValFun(data.floorCode, index)
      this.initData()
    },
    /**
     * 楼层下移
     *
     */
    async down(data, index) {
      // TODO： 边界情况处理 楼层索引和orderVal值的关系
      console.log(data, index)
      await this.modifyAppPageFloorOrderValFun(data.floorCode, index + 2)
      this.initData()
    },
    // 组件拖拽完成
    async updateHandler(evt) {
      let { newIndex: newDraggableIndex } = evt
      const moveData = this.listRight[newDraggableIndex]
      this.sortListRight() // 数据可能重新排序
      newDraggableIndex = this.listRight.indexOf(moveData) // 重新根据数据找回索引位置
      newDraggableIndex++ // 楼层排序默认从1开始
      try {
        const { data: newFloorCode } = await this.createAppPageFloorFun(moveData.floorType, newDraggableIndex, moveData.navigationType)
        await this.initData(newFloorCode)
        this.componentsName = moveData.localFloorName
        this.tableComponent = moveData.components
      } catch (err) {
        this.listRight.splice(newDraggableIndex, 1)
      }
    },
    // 右边移动
    async rightEnd(evt) {
      let { newIndex: newDraggableIndex } = evt
      const moveData = this.listRight[newDraggableIndex]
      this.sortListRight() // 数据可能重新排序
      newDraggableIndex = this.listRight.indexOf(moveData) // 重新根据数据找回索引位置
      newDraggableIndex++ // 楼层排序默认从1开始
      console.log(moveData, 'moveData')
      await this.modifyAppPageFloorOrderValFun(moveData.floorCode, newDraggableIndex++)
      this.initData()
    },
    // 具体编辑某组件
    editCompnent(v) {
      if (v.floorId) {
        this.componentData = v
        const { components, localFloorName } = v
        this.tableComponent = components
        this.componentsName = localFloorName
      }
    },