基于H5的拖拽排序组件Github地址：https://github.com/VicEcho/VD...由于使用了react.js技术栈，封装优先考虑输入和输出。基于数据驱动渲染页面，控制拖动元素的顺序。由于不考虑兼容IE8等老浏览器，所以拖放效果使用HTML5拖放（Draganddrop）。当然，如果需要丰富的兼容性，使用鼠标点击相关事件也很简单。效果如下：第一步了解H5拖拽的相关属性。MDN上有详细的说明，链接是https://developer.mozilla.org...需要注意的一点是react.js会在所有属性事件名称前加上“on”，后面是驼峰式。比如原生的点击事件应该使用react.js中的onClick事件。我的组件使用的拖放属性如下：draggable当设置为true时，当前控件可以拖动控件开始拖动时触发的onDragStart事件。它提供了一个dataTransfer.setData()方法来在对象中存储必要的数据，方便在其他方法中调用onDragOver来指定当前控件可以接收拖动组件的方法。一般在该方法中，防止鼠标拖动后进入另一个可接受区域时触发冒泡的onDragEnter，通过它可以实现onDragLeave效果。拖动到b，离开b时触发，可以用来监听当控件“释放”到一个有效的释放目标位置时onDrop触发消除移动效果的时机，我在这个方法中处理数据，并调用通过它的onChange方法，将value值暴露给父组件。draggable、onDragStart是拖入端需要设置的属性，onDragOver、onDragEnter、onDragLeave、onDrop是拖入端需要设置的属性。但是对于我的拖拽排序组件来说，每一个元素都是拖拽的第二步。由于“她”是react.js的一个组件，按照习惯，简单的将input属性设置为value，同时，ExposeonChange事件监听value的变化，暴露给父组件。同时暴露一个属性sortKey，告诉组件用哪个key作为排序字段。由于涉及到排序，允许指定组件的每个元素的内部子组件，所以我将输入数据格式定义为数组对象，其中内容可以是reactNode:value:[{content:'div1',code:'01',排序:0,},{内容:'div2',代码:'02',排序:1},{内容:'div3',代码:'03',排序:2},{内容:'div5',code:'05',sort:5},{content:'div4',code:'04',sort:4}]我会根据值生成可排序组件的每个节点。关键代码如下：//生成拖动组件createDraggleComponent(data,sortKey,style,uId){returndata.sort(this.compare(sortKey)).map((item)=>{return(
