reactjs实现拖拽盒子互换位置

1.自定义微信公众号菜单，客户要求做拖拽盒子，实现内容互换，开始选择使用react-draggable-tags，链接：https://ygyooo.github.io/react-draggable-tags/，但是效果不太理想，于是自己网上找资源，封装。
组件中使用

datalist=[
{id:1,sort_key:1,codeKey:'1',name:'菜单1'},
{id:2,sort_key:2,codeKey:'2',name:'菜单2'},
]

2.注意点：sort_key是将来用来排序的值，会一直变化，codeKey:必须是独一无二的字符串类型，（使用时间戳，要记得转成字符串类型）。datalist在onChange事件中不需要重新赋值，因为双向绑定的原因，会自动更新

3.使用组件

<VDraggable
   value={this.state.datalist}
    onChange={(item)=>{
      console.log(' ====',item)
    }}
    sortKey={"sort_key"}
    codeKey={"codeKey"}
    render={(item,idx)=>{
      return (
      <div key={idx} style={{flex:1,width:'100%'}}></div>)}}
  >
  </VDraggable>

//4.VDraggable组件封装

import React, { Component } from 'react';
import * as styles from './draggable.less'
export default class VDraggable extends Component {
    constructor(props) {
        super(props);
        this.state = {
            uId: this.guid()
        }
    }
    S4() {
        return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
    }
    guid() {
        return (this.S4() + this.S4() + "-" + this.S4() + "-" + this.S4() + "-" + this.S4() + "-" + this.S4() + this.S4() + this.S4());
    }
    // 拖动事件
    domdrugstart(sort, code, uId, item, ee) {
        ee.stopPropagation()
        ee.dataTransfer.setData("code", code);
        ee.dataTransfer.setData("uId", uId);
        ee.dataTransfer.setData("item", JSON.stringify(item));
        ee.dataTransfer.setData("sort", sort);
    }
    // 拖动后鼠标进入另一个可接受区域
    dragenter(ee) {
        if (ee.target.className.indexOf('droppedContent') !== -1) {
            ee.target.className = 'droppingContent';
        }
    }
    // a拖到b，离开b的时候触发
    dragleave(ee) {
        if (ee.target.className.indexOf('droppingContent') !== -1) {
            ee.target.className = 'droppedContent';
        }
    }
    // 对象排序
    compare(key) {
        return (obj1, obj2) => {
            if (obj1[key] < obj2[key]) {
                return -1;
            } else if (obj1[key] > obj2[key]) {
                return 1;
            }
            return 0
        }
    }
    // 当一个元素或是选中的文字被拖拽释放到一个有效的释放目标位置时
    drop(dropedSort, data, sortKey, dropedUid, codeKey, ee) {
        ee.preventDefault();
        const code = ee.dataTransfer.getData("code");
        const uId = ee.dataTransfer.getData("uId");
        const dragedItem = ee.dataTransfer.getData("item");
        const sort = ee.dataTransfer.getData("sort");
        if (uId === dropedUid) {
            if (sort < dropedSort) {
                data.map(item => {
                    if (item[codeKey] === code) {
                        item[sortKey] = dropedSort;
                    } else if (item[sortKey] > sort && item[sortKey] < dropedSort + 1) {
                        item[sortKey]--;
                    }
                    return item;
                });
                // ee.target.before(document.getElementById(code))
            } else {
                data.map(item => {
                    if (item[codeKey] === code) {
                        item[sortKey] = dropedSort;
                    } else if (item[sortKey] > dropedSort - 1 && item[sortKey] < sort) {
                        item[sortKey]++;
                    }
                    return item;
                });
                // ee.target.after(document.getElementById(code))
            }
            this.setState({})//refresh
        } else if (this.props.isAcceptAdd) {
            let objDragedItem = JSON.parse(dragedItem);
            if (data.filter(item => item[codeKey] === objDragedItem[codeKey]).length === 0) {
                const maxSort = Math.max.apply(Math, data.map(citem => citem[sortKey]));
                data.map(item => {
                    if (dropedSort === maxSort) {
                        objDragedItem[sortKey] = dropedSort + 1;
                    } else {
                        if (item.sort > dropedSort) {
                            objDragedItem[sortKey] = dropedSort + 1;
                            item[sortKey]++
                        }
                    }
                    return item
                });
                data.push(objDragedItem)
            }
        }
        this.props.onChange(data)
        if (ee.target.className.indexOf('droppingContent') !== -1) {
            ee.target.className = styles.droppedContent;
        }
    }
    allowDrop(ee) {
        ee.preventDefault();
    }
    // 生成拖拽组件
    createDraggleComponent(data, sortKey, style, uId, render, codeKey) {
        return data.sort(this.compare(sortKey)).map((item,idx) => {
            return (
                <div
                    className='droppedContent'
                    key={item[codeKey]}
                    draggable={true}
                    onDragEnter={this.dragenter.bind(this)}
                    onDragLeave={this.dragleave.bind(this)}
                    onDragStart={this.domdrugstart.bind(this, item[sortKey], item[codeKey], uId, item)}
                    onDrop={this.drop.bind(this, item[sortKey], data, sortKey, uId,codeKey)}
                    onDragOver={this.allowDrop.bind(this)}
                    style={{ ...style }}>{render(item,idx)}</div>
            )
        })
    }
    render() {
        const { value, sortKey, codeKey, style, render } = this.props;
        const { uId } = this.state;
        return (
            <div className={styles.container}>
                <div className='wrap'>
                    {this.createDraggleComponent(value, sortKey, style, uId, render, codeKey)}
                </div>
            </div>
        )
    }
}

//5.下面是样式

.container {
    :global {
        .wrap {
            display: flex; 
            flex-direction: row;
            flex-Wrap: wrap;
        }
        .droppedContent {
            flex: 1;
            border: 1px solid rgba(240, 242, 245, 0.8);
            margin-right: 10px;
            padding: 6px 6px 6px 6px;
            background-color: #fafafa;
            border-radius: 5%;
            box-shadow: 0 0 4px #d9d9d9;
            margin-bottom: 10px;
            align-self: flex-end;
        }
        .droppingContent {
            border: 2px dashed #008dff;
            box-shadow: 0 0 8px rgba(30, 144, 255, 0.8);
            margin-right: 10px;
            padding: 6px 6px 6px 6px;
            background-color: #fafafa;
            border-radius: 5%
        }
    }
}