使用h5实现react拖拽排序组件的方法（附代码）-

拖拽排序组件Github地址：https://github.com/VicEcho/VD...

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

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

实现的效果如下：

既然涉及到排序，同时允许指定组件每个元素的内部子组件，我将输入数据格式定义为一个数组对象，其中content可以为reactNode：

 value: [
                {
                    content: &＃39;p1&＃39;,
                    code: &＃39;01&＃39;,
                    sort: 0,
                },
                {
                    content: &＃39;p2&＃39;,
                    code: &＃39;02&＃39;,
                    sort: 1
                },
                {
                    content: &＃39;p3&＃39;,
                    code: &＃39;03&＃39;,
                    sort: 2
                },
                {
                    content: &＃39;p5&＃39;,
                    code: &＃39;05&＃39;,
                    sort: 5
                },
                {
                    content: &＃39;p4&＃39;,
                    code: &＃39;04&＃39;,
                    sort: 4
                }]

根据value我去生成可排序组件的每个node，关键代码如下：

    // 生成拖拽组件
    createDraggleComponent(data, sortKey, style, uId) {
        return data.sort(this.compare(sortKey)).map((item) => {
            return (
                
{item.content}
            )
        })
    }
    render() {
        const { value, sortKey, style } = this.props;
        return (
            
                

                    {this.createDraggleComponent(value, sortKey, style)}
                
            
        )
    }

其中的属性方法具体实现：

    // 拖动事件
    domdrugstart(sort, code, ee) {
        ee.dataTransfer.setData("code", code);
        ee.dataTransfer.setData("sort", sort);
    }
    // 拖动后鼠标进入另一个可接受区域
    dragenter(ee) {
        ee.target.style.border = &＃39;2px dashed #008dff&＃39;;
        ee.target.style.boxShadow = &＃39;0 0 8px rgba(30, 144, 255, 0.8)&＃39;;
    }
    // a拖到b，离开b的时候触发
    dragleave(ee) {
        ee.target.style.border = &＃39;1px solid grey&＃39;;
        ee.target.style.boxShadow = &＃39;&＃39;;
    }
    // 对象排序
    compare(key) {
        return (obj1, obj2) => {
            if (obj1[key]  obj2[key]) {
                return 1;
            }
            return 0
        }
    }
    // 当一个元素或是选中的文字被拖拽释放到一个有效的释放目标位置时
    drop(dropedSort, data, sortKey, ee) {
        ee.preventDefault();
        const code = ee.dataTransfer.getData("code");
        const sort = ee.dataTransfer.getData("sort");
        if (sort  {
                if (item.code === code) {
                    item[sortKey] = dropedSort;
                } else if (item[sortKey] > sort && item[sortKey]  {
                if (item.code === code) {
                    item[sortKey] = dropedSort;
                } else if (item[sortKey] > dropedSort - 1 && item[sortKey] 
值得注意的点其实只有一个，我控制顺序的时候，并没有使用.target.before(document.getElementById({id}))去实际操控节点，而是在每次触发onDrop时间的时候，处理数据的sort，并通过onChange事件暴露给父组件，将数据输出，通过改变value值触发虚拟dom重新去渲染，以此控制顺序。
根据公司的要求，在此基础上，我还实现了拖拽复制的功能。