vue+vuedraggable 实现文字/按钮/div拖拽组件详解

先看成果：（样式业务简陋请见谅！）

如图：左侧按钮/div/span/拖拽到右侧生成组件，右侧组件之间也可以互相碰撞替换；

左右都是数组，拖拽的过程相当于两个数组数据的迁移

本功能使用得draggable插件，参数配置请跳转查看！

下面开始分享实现过程：

1、下载draggable  

npm install vuedraggable --save

2、引入 draggable

import draggable from 'vuedraggable'
// 注册
components: { draggable }

3、 左侧代码实现

<draggable
  v-model="dragNode"
  tag="ul"
  v-bind="{
    group: { name: 'people', pull: 'clone', put: false },
    sort: false,
    animation: 0,
    filter: '.undraggable'
  }"
>
  // 循环生成按钮
  <button 
    v-for="(component,index) in dragNode" 
    :key="index" 
    class="btn-grad-03"
  >
    {{ component.title }}
  </button>
</draggable>

js逻辑部分

// 三个测试基础组件（实际开发可替换成自己的业务）
import component1 from './component1'
import component2 from './component2'
import component3 from './component3'

components: {
 component1,
 component2,
 component3
},

// 左侧组件名称列表
dragNode: [{
  name: 'component1',
  title: '文字组件'
}, {
  name: 'component2',
  title: '表格组件'
}, {
  name: 'component3',
  title: '环形进度条'
}]

4、右侧代码实现

<draggable
  v-model="dragData"
  style="width: 100%;height: 100%;"
  v-bind="{group: 'people',animation: 300}"
>
  <el-col 
    v-for="(item, index) in dragData" 
    :key="index" 
    :span="12" 
    style="margin-bottom: 30px;"
  >
    <div class="drag-content">
      // 关闭组件
      <i class="el-icon-close close-icon" @click="handleCloseComponent(index)" />
      <div>{{ item.title }}</div>
      // 循环生成动态组件 :is
      <component :is="item.name" class="mt" />
    </div>
  </el-col>
</draggable>

data 

// 拖拽后的数据
dragData: [],

methods

// 删除关闭组件（删除数据）
handleCloseComponent(index) {
 this.dragData.splice(index, 1)
};

以上就是该功能的具体实现，有需要的小伙伴可以借鉴；

---

这种扩展性很高；

1、做过表单设计器，首页完全拖拽布局，生成json存储的数据库，根据json回显渲染页面，实现个性化首页（左侧组件名、中间容器、右侧数据样式设置）

2、做过大屏幕模块定制化，不同人员可设置不同右侧组件布局

也可以使用多列拖拽容器等

因效果设计公司业务。暂不展示

---

ps：如果内容对大家有帮助的话，不要吝啬你的小手，点赞支持支持博主