title: Draggable divs stacking not working (no framework used)
body: <p>I'm crafting a "Playlist" style interface, where you can drag and drop elements back and forth from each playlist. Each element is a div (no ul methods needed so far). I'm using core draggable JS code, everything works fine til I start playing with them a bit more:</p>
  
  <p>a) If I drag element 1 below or above element 2 (within the same container or not), instead of pushing the element 2 upwards or downwards, it actually inserts my dragged element1 into element 2 (sometimes it even disappears), ending up with a 2 element included draggable div.</p>
  
  <p>c) If i drag element X to any empty container or a populated one but with enough free space below the actual content, it works properly, but when I try it again moving it to the top container area, or try to arrange any given between others, it gets inserted again into the element listed closer to the dropped spot.</p>
  
  <p>Any ideas on how to avoid this? All of this is random as you can see, sometimes it stacks properly, sometimes it doesn't.</p>
  
  <p>Thanks in advance!</p>
  
  <p>My code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function allowDrop(ev) {
    ev.preventDefault();
  }
  
  function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
  
  }
  
  function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.mycontainer {
    float: left;
    width: 200px;
    min-height: 50px;
    margin: 10px;
    padding: 10px;
    border: 1px solid #aaaaaa;
  }
  .myelement {
    display: block;
    width: 100%;
    max-height: 30px;
    margin-top: 2px;
    font-family: Arial, sans-serif;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)" class="mycontainer"&gt;
    &lt;div draggable="true" ondragstart="drag(event)" id="drag1" class="myelement"&gt;ELEMENT 1&lt;/div&gt;
    &lt;div draggable="true" ondragstart="drag(event)" id="drag2" class="myelement"&gt;ELEMENT 2&lt;/div&gt;
    &lt;div draggable="true" ondragstart="drag(event)" id="drag3" class="myelement"&gt;ELEMENT 3&lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)" class="mycontainer"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>