Vue+Vuedraggable：实现禅道主页的两栏拖拽功能

本文档主要介绍了如何在基于Vue的后台管理系统中实现类似禅道主页的拖拽效果。作者首先描述了项目背景，即在一个使用Vue框架的项目中，领导希望增加一种用户可以自由拖动组件的功能，以便于管理项目进度。实现这一效果主要依赖于`vuedraggable`这个强大的Vue插件。 文章详细地介绍了实现过程： 1. **布局设计**: 使用了简单的两栏流式布局，采用Flexbox布局技术。左边栏采用自适应宽度（`flex: 1`），右侧栏设置为固定的宽度（`width: 550px`）。`.layout-container`是整个布局的容器，`.left`和`.right`分别代表左右两侧的区域。 2. **拖拽容器的创建**: 在`.left`和`.right`中，分别使用`<draggable>`组件作为拖拽容器。`dragOptions`是一个计算属性，定义了拖拽的行为，如动画速度（`animation`）、拖拽触发的元素选择器（`handle`）、拖拽元素的分组策略（`group`）、以及当无法实时拖动时启用的备选方案（`forceFallback`）。 3. **`vuedraggable`插件的使用**: 通过`import draggable from 'vuedraggable'`引入插件，并将其导出为组件的一部分。在组件的模板中，将`dragOptions`绑定到`draggable`组件上，确保每个列表项都可以被拖动。 4. **代码结构**: 值得注意的是，`list="item"`属性表示拖拽元素是来自`item`数据属性的数组。这意味着你需要在组件的data或props中定义一个可拖动的列表，例如： ```javascript export default { data() { return { item: [ { name: '组件1', dragHandle: '.drag-handle-1' }, { name: '组件2', dragHandle: '.drag-handle-2' }, // 更多组件... ] }; } // ... } ``` 总结来说，本文提供了一个基础的Vue + `vuedraggable`实现拖拽功能的示例，适合于需要动态管理界面布局的后台管理系统。通过合理的组件划分和配置，开发者能够轻松地在Vue应用中添加类似禅道主页的交互体验。