title: drag and drop items between sections
body: <p><a href="https://i.stack.imgur.com/oxTAc.png" rel="nofollow noreferrer">See here</a></p>
  
  <p>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.</p>
  
  <p>this is my code:</p>
  
  <pre><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(
                  &lt;div&gt;
                  &lt;div className="row"&gt;
  
                      {
                          this.state.sections.map((sec_head, index) =&gt; {
                              return (
                                  &lt;div key={index} className="sec_container"&gt;
                                      &lt;h4  data-toggle="collapse" data-target={'#'+sec_head.idFolder}&gt;{sec_head.title}&lt;/h4&gt;
                                      &lt;ul id="list" className="sec_cont collapse in" id={sec_head.idFolder} 
                                          onDrop={this.onDrop}
                                          onDragOver={this.allowDrop}
                                          &gt;
  
                                          {
                                              sec_head.products.map((product, i) =&gt; {
                                                  return(
                                                      &lt;li 
                                                          index={i} key={i} className="sec_items col-md-3 alert alert-dismissable"
                                                          onDragStart={ (e) =&gt; this.onDragStart(e) } 
                                                          id={product.id} draggable="true" 
                                                          &gt;
                                                          &lt;a href="#" className="close" data-dismiss="alert" aria-label="close"&gt;×&lt;/a&gt;
  
                                                                      &lt;img  /&gt;
  
                                                          &lt;h5&gt;{product.name}&lt;/h5&gt;
  
  
                                                      &lt;/li&gt;
  
  
                                                  )
                                              })
                                          }
  
  
                                      &lt;/ul&gt;
  
                                  &lt;/div&gt;
                                 )
                              })
                      }
  
                  &lt;/div&gt;
  
                  &lt;/div&gt;
              )
          }
      }
  </code></pre>