title: How to make drag and drop using vanilla javascript?
body: <p>I have written a code for a drag and drop using vanilla javascript. When I pick the first div, it does move to last automatically while I was trying to move next.</p>
  <p>I don't want to use the jquery library.</p>
  <p>What I tried is I created the main div that acts as a container so that inside of that container each div can be moved easily</p>
  <p>I have attached what I tried, but I don't understand why this is happening.
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const draggables = document.querySelectorAll('.draggable')
  const containers = document.querySelectorAll('.mainContainer')
  
  draggables.forEach(draggable =&gt; {
    draggable.addEventListener('dragstart', () =&gt; {
      draggable.classList.add('dragging')
    })
  
    draggable.addEventListener('dragend', () =&gt; {
      draggable.classList.remove('dragging')
    })
  })
  
  containers.forEach(container =&gt; {
    container.addEventListener('dragover', e =&gt; {
      e.preventDefault()
      const afterElement = getDragAfterElement(container, e.clientY)
      const draggable = document.querySelector('.dragging')
      if (afterElement == null) {
        container.appendChild(draggable)
      } else {
        container.insertBefore(draggable, afterElement)
      }
    })
  })
  
  function getDragAfterElement(container, y) {
    const draggableElements = [...container.querySelectorAll('.draggable:not(.dragging)')]
  
    return draggableElements.reduce((closest, child) =&gt; {
      const box = child.getBoundingClientRect()
      const offset = y - box.top - box.height / 2
      if (offset &lt; 0 &amp;&amp; offset &gt; closest.offset) {
        return { offset: offset, element: child }
      } else {
        return closest
      }
    }, { offset: Number.NEGATIVE_INFINITY }).element
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    font-family: sans-serif;
  }
  
  .mainContainer {
    padding: 6px 0;
    width: 100%;
  }
  
  .draggable {
    cursor: move;
  
    display: inline-block;
    margin: 0 6px;
    z-index: 1;
  
    color: #fff;
    background-color: #087ee5;
    border: 1px solid #0675d6;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    text-align: center;
    max-width: 300px;
    min-width: 30px;
    border-collapse: separate;
    vertical-align: middle;
    padding-left: 7px;
    padding-right: 7px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  
  .draggable.dragging {
    opacity: 0.5;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="mainContainer"&gt;
        &lt;p class="draggable" draggable="true"&gt;MOVE 1&lt;/p&gt;
        &lt;p class="draggable" draggable="true"&gt;MOVE 2&lt;/p&gt;
        &lt;p class="draggable" draggable="true"&gt;MOVE 3&lt;/p&gt;
        &lt;p class="draggable" draggable="true"&gt;MOVE 4&lt;/p&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>