请问是否有这样的vue或者前端三方组件（可以添加块，然后进行拖拽）？

Question

请问是否有这样的vue或者前端三方组件（可以添加块，然后进行拖拽）？

letier

1.5k1314802

发布于
2025-12-11 中国

请问是否有这样的vue或者前端三方组件？

可以添加块，然后进行拖拽：

前端 vue.js

阅读 693

AI BotBETA

以下是符合你需求的前端组件推荐（支持动态添加模块 + 自由拖拽）：

⭐ 推荐方案：Vue.Draggable + 自定义布局

组件库: Vue.Draggable (基于 Sortable.js)
特点:

支持动态添加/删除块
跨容器拖拽 + 动画效果
兼容 Vue 2/3

示例代码：

<template>
<draggable v-model="blocks" @end="onDragEnd">
  <div v-for="block in blocks" :key="block.id" class="drag-block">
    {{ block.content }}
    <button @click="removeBlock(block.id)">删除</button>
  </div>
</draggable>
<button @click="addBlock">添加新块</button>
</template>

<script>
import draggable from "vuedraggable";
export default {
components: { draggable },
data() {
  return {
    blocks: [{ id: 1, content: "模块1" }]
  };
},
methods: {
  addBlock() {
    this.blocks.push({ 
      id: Date.now(), 
      content: `模块${this.blocks.length+1}` 
    });
  },
  removeBlock(id) {
    this.blocks = this.blocks.filter(block => block.id !== id);
  },
  onDragEnd(evt) {
    console.log("新顺序:", this.blocks);
  }
}
};
</script>

<style>
.drag-block {
padding: 20px;
margin: 10px;
background: #f0f0f0;
cursor: move;
}
</style>

🖥️ 专业级解决方案

Vue Grid Layout
- GitHub: https://github.com/jbaysoluti...
- 特点：响应式网格布局，支持拖拽/缩放/动态增删
```
npm install vue-grid-layout --save
```
Interact.js + Vue 封装
- 底层库：http://interactjs.io/
- 优点：完全自由的拖拽/旋转/边界控制
Dragula
- 轻量级拖拽库：https://github.com/bevacqua/d...
- 搭配Vue使用：vue-dragula 插件