drag and drop items between sections - html

Question

See here
I have two sections. I want to drag and drop elements between that two sections, but here's the element is appending but I need to drop the element at the first in that sections. When we drop the element it should place as first element for that section.
this is my code:
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"
>
×
<img />
<h5>{product.name}</h5>
</li>
)
})
}
</ul>
</div>
)
})
}
</div>
</div>
)
}
}