vue使用vuedraggable拖拽组件，进行组件生成_vue拖拽组件生成前端页面

最近写项目使用到了vuedraggable这个插件，进行组件生成，由于第一次使用，就上网搜相关文章，结果网上基本上都是上下拖拽之类的，没有找到自己想要的结果，然后就根据自己的需求结合相关文档进行了开发

开发完后大概结果视频如下：

静态效果如下：

 第一步：下载依赖：

npm i -S vuedraggable

第二步：在项目中引入：

import draggable from "vuedraggable";

第三步查看相关属性和方法：

属性：

 事件：

 属性和事件使用方法请详看 官网：

中文（国人翻译，可能更新不及时）：vue.draggable中文文档 - itxst.com

英文：https://www.itxst.com/vue-draggable/tutorial.html

第四步：在代码里使用 html

<template>
<div>
<div class="">
              <draggable
                v-model="applyList"
                :group="{ name: 'piece', pull: 'clone', put: true }"
                animation="100"
                :sort="false"
                :clone="addComponent"//左边应用组数据
              >
                <div class="employ" v-for="item in applyList" :key="item.id">
                  <span class="nr">{{ item.name }}</span>
                </div>
              </draggable>
            </div>
<div class="">
              <draggable
                v-model="applyList"
                :group="{ name: 'piece', pull: 'clone', put: true }"
                animation="100"
                :sort="false"
                :clone="addComponent"//左边应用数据
              >
                <div class="employ" v-for="item in applyList" :key="item.id">
                  <span class="nr">{{ item.name }}</span>
                </div>
              </draggable>
            </div>
  <div>
            <draggable v-model="onList" group="piece" animation="100">//右边空数组
              <transition-group :style="style">
                <div class="myEmploy" v-for="item in onList" :key="item.id">
                  <span class="zjNr"
                    >{{ item.name }}
                    <div class="ddd">
                      <draggable
                        v-model="item.myList"//父级空数组
                        :group="{
                          name: 'theChild',
                          pull: 'clone',
                        }"
                        animation="100"
                        :clone="cloneComponent"
                        :sort="true"
                      >
                        <transition-group :style="style">
                          <!-- 子应用 -->
                          <div class="caTion" :key="item.id">
                            <div
                              class="suBAppLicaTion"
                              v-for="(it, idx) in item.myList"//子级空数组
                              :key="idx"
                            >
                              <i
                                class="el-icon-circle-close myDelete"
                                @click="onDelete(idx)"
                              ></i>
                              <img :src="it.url" alt="" />
                              <span class="ziNr">{{ it.name }}</span>
                            </div>
                          </div>
                        </transition-group>
                      </draggable>
                    </div>
                  </span>
                </div>
              </transition-group>
            </draggable>
            从左侧拖入或点选组件进行应用组合
          </div>
</div>
</template>

js：

<script>
import draggable from "vuedraggable";
 
export default {
  components: {
    draggable,
  },
  data() {
    return {
      applyList: [
        {
          name: "前端小脑虎",
          id: 1,
        },
        {
          name: "关注我，不迷路",
          id: 2,
        },
        {
          name: "vue问题大全",
          id: 3,
        },
        {
          name: "欢迎来到深圳",
          id: 4,
        },
      ],
      useList: [
        {
          url: require("../../assets/images/profile.jpg"),
          name: "学习呀",
          id: 5,
        },
        {
          url: require("../../assets/images/profile.jpg"),
          name: "前端耐斯",
          id: 6,
        },
        {
          url: require("../../assets/images/profile.jpg"),
          name: "前端小脑虎",
          id: 7,
        },
        {
          url: require("../../assets/images/profile.jpg"),
          name: "深圳欢迎你",
          id: 8,
        },
      ],
      list: [
        {
          url: require("../../assets/images/profile.jpg"),
          name: "互连网+",
          id: 1,
        },
        {
          url: require("../../assets/images/profile.jpg"),
          name: "直装直提",
          id: 2,
        },
      ],
      onList: [],
      myList: [],
      style: "min-height:120px;display: block;",
      utilize: false,
      AppGroup: false,
    };
  },
  methods: {
    // 删除
    onDelete(idx) {
      this.onList.forEach((item) => {
        const id = item.myList[idx].id;
        item.myList.splice(idx, 1);
        console.log("item", item.myList);
      });
    },
    // 子应用添加
    newSubAppLicaTion(item) {
      const clone = this.cloneComponent(item);
      this.onList.forEach((item) => {
        if (item.myList) {
          item.myList.push(clone);
        } else {
          item.myList = [clone];
        }
      });
    },
    // 应用组添加
    addComponent(item) {
      let exist = false;
      this.onList.forEach((it) => {
        //遍历onList，判断是否当前拖拽的应用组内容是否存在，存在就赋值exist为true并return
        if (it.id == item.id) {
          exist = true;
          return;
        }
      });
      if (exist) {
        //根据exist来判断，为true就return，false就push进去
        this.$message({
          message: "组件里已经有相同的应用组啦，请拖拽其他应用组哦",
          type: "warning",
        });
        return;
      } else {
        const clone = item;
        this.onList.push({ ...clone, myList: [] });
      }
    },
    // 应用复制
    cloneComponent(origin) {
      let exist = false;
      this.onList.forEach((item) => {
        item.myList.forEach((it) => {
          //遍历myList，判断是否当前拖拽的应用内容是否存在，存在就赋值exist为true并return
          if (it.id == origin.id) {
            exist = true;
            return;
          }
        });
      });
      if (exist) {
        //根据exist来判断，为true就return，false就push进去
        this.$message({
          message: "组件里已经有相同的应用啦，请拖拽其他应用哦",
          type: "warning",
        });
        return;
      } else {
        const clone = origin;
        return clone;
      }
    },
 
    onEnd() {
      this.drag = false;
    },
    save() {},
    // 编辑
  },
};
</script>

以上就是这个插件在项目中使用的流程 如果有不懂可以私信我