h5拖拽api (drag,drop)实现多图片拖动排序，兼容移动端

需求描述：
h5页面实现允许多张图片上传并且支持对图片长按拖动排序，由于我们的h5页面在pc端和移动端都有入口，因此拖动排序需要兼容pc和移动端。这里不涉及图片上传，只涉及对上传的图片进行拖动排序。

需求实现：
在开发前需要知道，h5拖拽api(drag/drop)基本只支持pc端（但是，在实际开发中，发现很多安卓手机也支持这个api, ios端不支持），因此我们如果使用拖拽api，需要做移动端的兼容。我的做法是使用了drag/drop来实现pc端拖拽效果，采用成熟的插件移动端拖拽来适配移动端，经测试，这个插件可以使得ios内部能识别拖拽api，能比较好的兼容移动端。

首先来了解下拖拽api，包含拖动元素上的事件，放置目标元素的位置，在两者之间传递数据的对象。

拖动元素上的事件：

• dragstart: 按下鼠标并开始移动时
• drag：元素被拖动期间持续触发
• dragend：拖动停止时候触发
  默认情况，浏览器不会在拖动期间改变被拖动元素 ，大多数浏览器会创建一个半透明副本。

放置目标元素的位置的事件

• dragenter:元素被拖动到放置目标上触发
• dragover：被拖动元素还在放置目标范围内移动时候持续触发
• drop：元素被放置到放置目标上。
  当拖动元素经过无效放置位置时候，drop不被会触发，可以通过重写enter或者over事件的默认行为把一个无效放置目标变成一个放置目标，所以通常需要取消这两个事件的默认行为。

dataTransfer对象
dataTransfer: 事件对象的属性，用于在被拖动元素和目标元素之间传递数据。它主要有两个方法：getData和setData, setDat