基于vue实现列表拖拽排序的效果 在日常开发中，特别是管理端，经常会遇到要实现拖拽排序的效果；这里提供一种简单的实现方案。 首先，我们先了解一下js原生拖动事件: 在拖动目标上触发事件 (源元素):

这是用 vue2.x 实现的类似 gridster 的组件 包含拖动，缩放，上浮排版功能 非常适用于比如 web dashboard 排版（作者开发此组件的业务场景是：highchart 的自由排版）

定义一个变量type，用于触发拖拽事件开始的时候，确定当前拖拽元素是哪种类型，比如：产品、广告图... 即松开鼠标、或离开释放区域，则恢复默认状态。 上方的计算规则，用于判断元素是否为拖拽元素。 页面的显示方式，拖拽的时候只显示组件名，释放之后才恢复正常显示内容。 其实并不复杂…

之前撸了一个 copy 指令，这次再撸一个拖拽指令。。 emmm。。没错，看起来就是如此的鸡肋，但是莫得办法，大佬喜欢啊。 由于我们项目中用的是 element-ui ，所有这个指令只针对 element-ui的对话框组件哈，如果你们用的别的ui库也有这个需求的，涂涂改改应该也…

Vue.Draggable中文文档参考 | 官方文档翻译, 逐行对Vue.draggable进行翻译, 仅供参考,如有不足,请指正~