需求描述：
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, setData的第一个参数为Text或者URL, dataTransfer中保存的数据只能在drop中读取。该对象还有dropEffect和effectAllowed属性。
具体实现
import React from 'react'import { polyfill } from "mobile-drag-drop" // 移动端适配import {scrollBehaviourDragImageTranslateOverride} from "mobile-drag-drop/scroll-behaviour"export default class Drag extends ponent{constructor(props){super(props)this.state = {imglist:[{imageUrl:'/349669/f/6683901.jpg'},{imageUrl:'/349669/f/6695960.jpg'},{imageUrl:'/38538/f/6864556.jpg'}],originindex:0,targetindex:0,}this.myRef = React.createRef()}//周期函数componentDidMount(){//兼容移动端polyfill({dragImageTranslateOverride: scrollBehaviourDragImageTranslateOverride})var iosDragDropShim = { enableEnterLeave: true } // 注意这里采用ref的方式 // let dragCon = document.getElementById('drag-wrap')let dragCon = this.myRefdragCon.addEventListener('dragstart', this.startDrag.bind(this), false)dragCon.addEventListener('dragover', function (e) {e.preventDefault();}, false)dragCon.addEventListener('dragenter', function (e) {e.preventDefault();}, false) dragCon.addEventListener('drop', this.exchangeElement.bind(this), false)} startDrag(e) {let originindex = e.target.id.charAt(e.target.id.length-1)console.log(originindex)e.dataTransfer.setData('Text', originindex)}exchangeElement(e){e.preventDefault()let originindex = e.dataTransfer.getData('Text')let targetindex = e.target.id.charAt(e.target.id.length-1)let oldimageList = this.state.imglistlet newimglist = this.swapArray(oldimageList,originindex,targetindex)this.setState({imglist:newimglist})} swapArray(arr, index1, index2){arr[index1] = arr.splice(index2, 1, arr[index1])[0]return arr}render(){let { imglist } = this.statereturn(<div><ul id='drag-wrap' ref={this.myRef}>{imglist && imglist.map((item,index) => (<li ><img src={item.imageUrl} id={`img${index}`} /></li>))}</ul></div>)}}
//css文件ul{list-style:none}li{float: left;padding-left: 10px;}ul li img{width:150px;height:150px}
亲自测试过插件mobile-drag-drop兼容移动端（安卓和ios），如果不使用react，可以原生js，进行dom操作。
如果觉得《h5拖拽api (drag drop)实现多图片拖动排序 兼容移动端》对你有帮助，请点赞、收藏，并留下你的观点哦！
