vue拖拽组件-vue使用vuedraggable拖拽组件，进行组件生成

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

静态大概效果如下：

视频效果：

接下来就是使用步骤了

第一步：下载依赖：

npm i -S vuedraggable

第二步：在项目中引入：

import draggable from "vuedraggable";

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

属性：

事件：

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

中文（国人翻译vue拖拽组件，可能更新不及时）：vue.draggable中文文档 – itxst.com

英文：

第四步：在代码里使用 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部分：

<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>

限时特惠：本站每日持续更新海量设计资源，一年会员只需29.9元，全站资源免费下载
站长微信：ziyuanshu688

htebazile永久VIP

收藏 海报 链接