本文摘自PHP中文网，作者不言，侵删。
本篇文章给大家带来的内容是关于使用h5实现react拖拽排序组件的方法（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。拖拽排序组件Github地址：https://github.com/VicEcho/VD...
因为使用了react.js技术栈，所以封装优先考虑输入和输出。基于数据驱动去渲染页面、控制拖拽元素的顺序。
由于我不考虑兼容IE8等旧版本浏览器，拖拽的效果采用了HTML5的拖放（Drag 和 drop）。当然，如果要求兼容性丰富，使用鼠标点击的相关事件也很简单。
实现的效果如下：
第一步是先了解H5拖放的相关属性，MDN上有详细的说明，链接为https://developer.mozilla.org...
有一点需要注意的是，react.js会给所有的属性事件名称前加上"on",后面则为驼峰式写法。例如原生的click事件，在react.js里应使用onClick事件。
我的组件使用的拖放属性如下：
draggable 当设置为true时，当前控件可以拖拽
onDragStart 控件开始被拖拽时触发的事件，它提供一个dataTransfer.setData()方法，将必要的数据存储在对象中便于在其它方法中调用
onDragOver 规定当前控件可以接收拖拽的组件的方法，一般在此方法中阻止冒泡
onDragEnter 拖动后鼠标进入另一个可接受区域时触发，通过它可以实现移入效果
onDragLeave a拖到b，离开b的时候触发，可以用于监听消除移入效果的时机
onDrop 当控件被“释放”到一个有效的释放目标位置时触发，我在这个方法中处理数据，并通过它调用onChange方法，将value值暴露给父组件
其中draggable，onDragStart是被“拖拽”方需要设置的属性，onDragOver，onDragEnter，onDragLeave和onDrop是被“拖入”方需要设置的属性。不过对于我的拖拽排序组件，每一个元素都是拖拽和拖入方
相关阅读 >>
更多相关阅读请进入《react.js》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
