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

背景

先说下需求，为了提升开发效率和降低开发成本和技术难度，采用低代码方式，通过配置来生成代码，算是代码生成器的升级版解决方案。

对于前端页面，某个业务实体，如系统参数，常见的菜单对应一个列表页面，顶部为页面级功能按钮，如新增、删除、导出等，中间为查询区域，可以放几个常用的查询条件，最下面则是查询结果，以表格形式展现行列数据。此外，为了方便用户操作，往往查询结果表格的行记录，最后一列放一些针对于该行数据的快捷按钮，如删除、编辑等，如下图所示

注：上图中将页面级功能按钮放到了查询区域与查询结果之间。

要实现上面页面的配置，需要进行抽象，划分出四个可配置的区域，即页面按钮、查询条件、查询列表、行按钮，效果图如下：

技术方案上，通过配置，结合模板技术，实现列表视图页面前端代码的自动化生成。

上面这个配置功能，一方面，涉及到元素的排序，如按钮的次序、查询条件的次序、查询结果中列的次序；另一方面，涉及到列表间元素的移动，如将实体属性添加到查询列表或查询结果中。如采用传统模式，需要选中某个元素，点击左移、右移等按钮，既不直观，操作也繁琐。而采用拖拽式操作，所见即所得，则用户体验大幅提升。

Element UI 提供了大部分UI控件，但对于拖拽，确实是个短板，于是就需要额外的控件来补充了，即今天的主角vuedraggable。

简介

Draggable为基于Sortable.js的vue组件，用以实现拖拽功能。

特性

• 支持触摸设备
• 支持拖拽和选择文本
• 支持智能滚动
• 支持不同列表之间的拖拽
• 不以jQuery为基础
• 和视图模型同步刷新
• 和vue2的过渡动画兼容
• 支持撤销操作
• 当需要完全控制时，可以抛出所有变化
• 可以和现有的UI组件兼容

官方地址：https://github.com/SortableJS/Vue.Draggable
中文版文档：https://www.itxst.com/vue-draggable/tutorial.html

安装

npm install vuedraggable -S

引用

import Draggable from ‘vuedraggable’

实战

接下来我会从实战角度介绍如何实现我们的功能，用到的关键属性和方法，需要注意的事项，坑点以及解决方案。

拖动排序

以页面级功能按钮为例，实现效果如下：

前端源码如下：