react 拖拽组件该怎么搭建？

Question

直接写了一个拖拽排序的组件，主要原理是
通过this.props.children,来重新给每个children套一个壳，然后这个壳是draggable=true的，但是因为onDrop判定的组件每次都判定到children里面的元素，我无法控制children元素的id，所以排序是报错，于是我给壳加了一个顶，zindex=99的透明层，给这个顶加了排序属性，但是这样，因为不会穿透，children的所有响应事件全部失效了（hover），该咋办？

  createChild(){
    if(!this.state.children) return; 
    var tmp = [];
    for (let j = 0; j < this.state.children.length; j++) {
        if (this.state.children[j].props.dragable) {
          tmp.push(<div className={style.ChildBox} key={'dropBox'+j} id={j}  
            draggable={true}      //设置可拖拽
            onDragStart={this.onDragStart}    //  设置拖动开始Fun
            onDragOver={this.onDragOver}>   //拖动结束Fun
          <div className={style.fakeMask} id={j}>   //假的带有排序ID的顶 绝对定位
            </div>{this.state.children[j]}
          </div>)
        } else {
          tmp.push(<div className={style.ChildBox} key={'dropBox'+j} id={j}><div className={style.fakeMask} id={j}></div>{this.state.children[j]}</div>)
        }
        
    }
    return tmp
  }
onDrop(event){
    this.props.onSort(event.dataTransfer.getData('id'),event.target.id);    //将被拖动元素序列和被放置元素的序列传给父组件
}

fakeMask就是我说的透明的顶，加上排序id我才好给父组件返回排序序列。
如果不加，则每次onDrop判定的都是{this.state.children[j]}拿不到排序;
父组件拿到排序ID以后再通过排序ID，重新调换数据数组内位置，然后重新渲染数据。

父组件：

onSort(dragindex,dropindex){
    let newArray = this.insertArray(this.state.dataArray,parseInt(dragindex),parseInt(dropindex));    //将被拖动组件元素序列插入被放置元素序列的前面，返回新数组
    this.setState({
      dataArray:newArray,
    });
  }
insertArray(arr, item, index) {
    var t = arr[item];
    arr.splice(item, 1);
    return arr.slice(0,index).concat(t, arr.slice(index));
  }

Answer 1

找到解决方法了，当onDragOver的时候，让fakeMask变成100%*100%，否则不显示

onDragOver(event){
    this.setState({
      DragOver:true,
    })
    event.preventDefault()
 }
createChild(){
    if(!this.state.children) return; 
    var tmp = [];
    for (let j = 0; j < this.state.children.length; j++) {
        if (this.state.children[j].props.dragable) {
          tmp.push(<div className={style.ChildBox} key={'dropBox'+j} id={j}  
            draggable={true}      //设置可拖拽
            onDragStart={this.onDragStart.bind(this,j)}    //  设置拖动开始Fun
            onDragEnd={this.onDragEnd}
            onDragOver={this.onDragOver}
            >   
          <div className={[style.fakeMask,this.state.DragOver?style.actmask:''].join(' ')} id={j}></div>
          {this.state.children[j]}
          </div>)
        } else {
          tmp.push(<div className={style.ChildBox} key={'dropBox'+j} id={j}><div className={style.fakeMask} id={j}></div>{this.state.children[j]}</div>)
        }
        
    }
    return tmp
  }

Answer 2

有现成的组件为何不用.react-dnd 或者react-draggable.