title: HTML5 draggable changing position of droppable areas
body: <p>I am using native HTML5 functionality draggable.</p>
  
  <p>What is causing me problems is that droppable elements (areas where draggable can be dropped - yellow DIVs) are changing position when drop is made.</p>
  
  <p>What I've already tried is to make draggable element position:absolute, but then draggable elements are overlapping.</p>
  
  <p>Any idea how to solve this? I would like to have draggable elements (blue DIV) stacked, but when they are dragged into yellow DIVS, yellow ones must remain their position.</p>
  
  <p><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>function StartDrag(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));
  }
  
  function DragOver(ev) {
      ev.preventDefault();
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.div1{
    position:relative;
    padding: 15px;
    width: 300px;
    height: 300px;
    border: 2px solid black;
    background-color: yellow;
    margin: 15px;
    display:inline-block;
  }
  
  .div2{  
    
    width: 100px;
    height: 100px;
    border: 2px solid black;
    background-color: blue;  
    display:inline-block;
    margin: 15px;
  }
  
  .div3{
    position:relative;
    margin: 15px;
    padding:15px;
    border: 2px solid black;
    background-color: gray;
    width: 600px;
    height: 400px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="div1" class="div1" ondrop="Drop(event)" ondragover="DragOver(event)"&gt;
  
    
  
  &lt;/div&gt;
  &lt;div id="div2" class="div1" ondrop="Drop(event)" ondragover="DragOver(event)"&gt;&lt;/div&gt;
  
  
  
  
  &lt;div id="divDraggableElements" class="div3" ondrop="Drop(event)" ondragover="DragOver(event)"&gt;
    &lt;div id="divD1" class="div2" draggable="true" ondragstart="StartDrag(event);"&gt;&lt;/div&gt;
    &lt;div id="divD2" class="div2" draggable="true" ondragstart="StartDrag(event);"&gt;&lt;/div&gt;
    &lt;div id="divD3" class="div2" draggable="true" ondragstart="StartDrag(event);"&gt;&lt;/div&gt;
    
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>