我有两个部分。我想在这两个部分之间拖放元素，但是这里的元素是追加的，但我需要在该部分的第一个元素中删除元素。当我们删除元素时，它应该作为该部分的第一个元素放置。
这是我的代码：
class Sections extends React.Component {
constructor(props) {
super(props);
this.state = {
sections: [
{
"idFolder":1,
"idUser":1,
"title":"Your Materials",
"products":[
{ "id":1,
"productType":"textile",
"name":"cotton"
"images":[
{
"original_file_name":"bear.jpeg"
}
]
},
{ "id":3,
"productType":"textile",
"name":"cotton"
}
]
},
{
"idFolder":2,
"idUser":1,
"title":"Your Materials",
"products":[
{ "id":5,
"productType":"textile",
"name":"cotton"
},
{ "id":6,
"productType":"textile",
"name":"cotton"
}
]
}
]
}
};
onDragStart(e){
e.dataTransfer.dropEffect = "copy";
e.dataTransfer.setData( "text", e.target.getAttribute('id'));
}
allowDrop (ev){
ev.preventDefault();
}
onDrop(e){
const data = e.dataTransfer.getData("text");
e.target.appendChild(document.getElementById(data));
}
render(){
return(
<div>
<div className="row">
{
this.state.sections.map((sec_head, index) => {
return (
<div key={index} className="sec_container">
<h4 data-toggle="collapse" data-target={'#'+sec_head.idFolder}>{sec_head.title}</h4>
<ul id="list" className="sec_cont collapse in" id={sec_head.idFolder}
onDrop={this.onDrop}
onDragOver={this.allowDrop}
>
{
sec_head.products.map((product, i) => {
return(
<li
index={i} key={i} className="sec_items col-md-3 alert alert-dismissable"
onDragStart={ (e) => this.onDragStart(e) }
id={product.id} draggable="true"
>
<a href="#" className="close" data-dismiss="alert" aria-label="close">×</a>
<img />
<h5>{product.name}</h5>
</li>
)
})
}
</ul>
</div>
)
})
}
</div>
</div>
)
}
}