title: Drag-and-Drop Furniture into room
body: <p>I got this room, and some furniture.<br>
  <strong>1.</strong> I would like so the furniture is above the floor instead of under the floor, when dropping the furniture.<br>
  <strong>2.</strong> I would like swapping furniture, so when you drop a furniture onto the floor where there already is a furniture it should swap place.</p>
  
  <p><a href="http://lolk3070.dk/roomtest/index.html" rel="nofollow noreferrer">This is what I have made for now...</a></p>
  
  <p><strong>My code:</strong></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>$(document).ready(function() {
    $('#div2').on("drop", function(e) {
      e.preventDefault();
      e.stopPropagation();
    });
  });
  
  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>#floor {
    top:116px;
    left:393px;
    position:absolute;
    margin-bottom: 10px;
    height: 40px;
    width: 65px;
    background-image: url("http://i.imgur.com/tCuykFV.png")
  }
  
  #floor:hover {
      height: 43px;
      width: 66px;
      background-image: url("http://i.imgur.com/Eo1dNNv.png")
  }
  
  #space {
    width:200px;
  }
  
  #div3 {
    float: right;
    border: 1px solid #CCC;
    margin-bottom: 10px;
    height: 200px;
    width: 102px;
  }
  
  #dice {
      width:56px;
      height:79px;
  }
  
  #walls {
    position:absolute;
    top:0px;
    left:0px;
    width:688px;
    height:510px;
    border: 1px solid #CCC;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;head&gt;
      &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
      &lt;script type="text/javascript" src="js.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;img id="walls" src="http://i.imgur.com/FA6ka0v.png"&gt;
      
  &lt;div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;&lt;/div&gt;
  
  &lt;div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:132px;left:424px;"&gt;&lt;/div&gt;
  
  &lt;div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:132px;left:360px;"&gt;&lt;/div&gt;
  
  
  
  &lt;div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;
  
  &lt;div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;
    &lt;img src="https://hydra-media.cursecdn.com/habbo.gamepedia.com/e/ed/Edicehc.png?version=6e01ba71341b8361df23749c65498f44" draggable="true" ondragstart="drag(event)" id="drag1" width="56" height="79"&gt;
    
    &lt;img src="https://hydra-media.cursecdn.com/habbo.gamepedia.com/0/0f/Mocchamaster.png?version=6cf4d970f845287fa21d4ef7691eee84" draggable="true" ondragstart="drag(event)" id="drag2" width="66" height="137"&gt;
    
    &lt;/div&gt;
    
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>