vue elementui 实现图片上传后拖拽排序功能
很久没写技术博客了，今天是春节假期前最后一天上班，没什么事情，就随便写写吧，这次就分享一下之前封装的一个图片上传组件的实现过程，这里主要分享下拖拽排序功能的一种实现方式。
-
2021-11-17 更新： 文末附完整源码及使用示例代码 2021-08-30 更新： 新增vue3支持组件，采用script setup语法+ts语言，并拓展了一些功能，代码见文章末尾。
1、主要技术栈
vue2、elementui2、vuedraggable2
2、需求分析
产品的要求就是多图上传完后，可以对图片列表进行拖拽排序。本身elementui的el-upload组件已经支持很多功能，但是唯独没有拖拽排序，它的多图上传是按你上传时选择的文件的顺序来展示。
一般产品提出的复杂功能咱开发人员都是尽量简化或者砍掉哈哈，不过呢这个功能还是对用户非常友好的，秉承着用户至上的原则那就接下吧。
3、思路
要是用原生js手写一个拖拽功能做起来会很复杂，h5的draggable原生api有点鸡肋，很难实现一个比较好的交互效果，用js的mouseover不错，但是要实现最终完整的交互效果还是很费时间精力，所以还是找插件吧，通过拖拽插件和el-upload结合实现。
然后网上找到一个vuedraggable插件，
