使用vuedraggable实现拖拽式操作实战

Element UI 提供了大部分UI控件，但对于拖拽，确实是个短板，于是就需要额外的控件来补充了，即本文档的主角vuedraggable。 从实战角度，以低代码配置功能为例，说明vuedraggable的属性、方法、用法，以及使用过程中遇到的一些坑点及解决方案。 要点如下： group属性的要点 update和sort事件的差别 add事件如何获取数据 如何处理属性重复添加问题 不同列表间拖动group属性无效 实例： 某个业务实体，如用户管理，常见的菜单对应一个列表页面，顶部为页面级功能按钮，如新增、删除、导出等，中间为查询区域，可以放几个常用的查询条件，最下面则是查询结果，以表格形式展现行列数据。查询结果表格的行记录，最后一列放一些针对于该行数据的快捷按钮，如删除、编辑等。 这个配置功能，一方面涉及到元素的排序，如按钮的次序、查询条件的次序、查询结果中列的次序；另一方面涉及到列表间元素的移动，如将实体属性添加到查询列表或查询结果中。如采用传统模式，需要选中某个元素，点击左移、右移等按钮，既不直观，操作也繁琐。而采用拖拽式操作，所见即所得，用户体验大幅提升。 在Vue.js应用中，我们经常需要实现拖拽功能来增强用户体验，特别是在构建低代码平台或者配置界面时。Element UI虽然提供了丰富的UI组件，但对拖拽功能的支持相对较弱。这时，我们可以借助第三方库vuedraggable来实现。vuedraggable是基于Sortable.js的Vue组件，它提供了一套完整的拖拽解决方案，包括触摸设备支持、文本选择、智能滚动、不同列表间的拖放等特性，并且与Vue 2.x的过渡动画兼容。 我们需要安装vuedraggable库。在项目中运行以下命令： ```bash npm install vuedraggable -S ``` 然后，在Vue组件中引入并使用Draggable组件： ```javascript import Draggable from 'vuedraggable'; ``` vuedraggable的核心属性和方法包括： 1. **v-model**: 用于绑定数据，通常是一个数组，表示拖动的元素列表。 2. **group**: 用于设置拖动元素的分组，可以防止不同组间的元素相互干扰。 3. **@sort**: 当元素在组内排序时触发，提供新的元素顺序。 4. **@update**: 在拖放操作结束后触发，无论是否改变了元素顺序，都会触发此事件。 5. **@add**: 当元素添加到列表时触发，可以通过此事件获取新添加的数据。 在实际应用中，例如页面按钮配置场景，我们可以这样设置： ```html {{ item.name }} ``` 在这个例子中，`buttonList`是存储按钮信息的数组，`group`属性定义了拖动分组，`updateSort`和`update`是处理排序和更新的回调函数。`@close`和`@click`事件分别用于删除和修改按钮。 在实际使用中，可能会遇到一些问题，比如元素重复添加和不同列表间拖动group属性无效。为了解决这些问题，我们需要在处理`@add`事件时进行数据校验，确保不添加重复元素。对于group属性无效的问题，通常是因为不同列表间的group值没有正确设置或没有设置。 vuedraggable提供了强大的拖拽功能，可以轻松实现列表排序和元素移动。通过合理利用其属性和事件，我们可以构建出直观易用的界面，提升用户体验。在开发过程中，遇到问题时，可以查阅官方文档或社区资源找到解决方案，确保功能的稳定实现。