如何实现一个基于React.js的拖拽排序组件功能？

本文共计1180个文字，预计阅读时间需要5分钟。

由于使用了react.js技术栈，实现了输入和输出的封装。基于数据驱动去渲染页面、控制元素拖拽的顺序。考虑到不兼容IE8等旧版本浏览器，拖拽效果采用了HTML5的拖放（Drag）技术。

因为使用了react.js技术栈，所以封装优先考虑输入和输出。基于数据驱动去渲染页面、控制拖拽元素的顺序。

由于我不考虑兼容IE8等旧版本浏览器，拖拽的效果采用了HTML5的拖放（Drag 和 drop）。当然，如果要求兼容性丰富，使用鼠标点击的相关事件也很简单。

实现的效果如下：

第一步是先了解H5拖放的相关属性，MDN上有详细的说明，链接

有一点需要注意的是，react.js会给所有的属性事件名称前加上"on",后面则为驼峰式写法。例如原生的click事件，在react.js里应使用onClick事件。