directly writes a component of drag-and-drop sorting. The main principle is that
reshuffles each children with a shell through this.props.children, and then the shell is draggable=true, but because the component determined by onDrop determines the element in children every time, I can"t control the id, of the children element, so the sorting is an error, so I added a top to the shell, a transparent layer of zindex=99, and added a sorting attribute to this top, but this way, because it won"t penetrate, All the response events of children have failed. What should I do with (hover),?
createChild(){
if(!this.state.children) return;
var tmp = [];
for (let j = 0; j < this.state.children.length; jPP) {
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 is what I call the transparent top, plus the sort id so that I can return the sort sequence to the parent component.
if you do not add it, each time onDrop determines that {this.state.children [j]} cannot get the sort;
the parent component gets the sort ID, and then rechanges the positions in the data array by sorting ID, and then renders the data.
parent component:
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));
}