title: html5 drag and drop prevent drop unless div empty
body: <p>I'm attempting to create a sort of visual interface for simple graphic creation. It consists of 10 image icons, and 5 boxes in which those icons can be placed. I want users to be able to pick which of the 10 icons they would like to display, and arrange the elements as they see fit using drag and drop. The 5 icons are also inside of a div in which the icons can be dropped, so that they can return the icon to the "home" row if they change their mind and wish to select another icon.</p>
  
  <p>not unlike this simple tutorial, but with more divs and icons:
  <a href="http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop2" rel="nofollow">http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop2</a></p>
  
  <p>my script:</p>
  
  <pre><code>&lt;script&gt;
  function allowDrop(ev)
  {
  ev.preventDefault();
  }
  function drag(ev)
  {
  ev.dataTransfer.setData("Text",ev.target.id);
  //CSS CHANGES HERE FOR ON PICKUP
  $( ".dragfive" ).css("border", "2px solid #ff9d00");
  $( ".select5" ).css("border", "2px solid #ff9d00");
  }
  function drop(ev)
  {
  ev.preventDefault();
  var data=ev.dataTransfer.getData("Text");
  ev.target.appendChild(document.getElementById(data));
  //CSS CHANGES HERE FOR ON DROP
  $( ".dragfive" ).css("border", "2px solid transparent");
  $( ".select5" ).css("border", "2px solid transparent");
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>my code is exactly the same as the tutorial, but I've added some nice CSS changes as the comments indicate - I made colorful borders appear to indicate to users where they can place the item. These become transparent once dropped. Works perfectly except...</p>
  
  <ol>
  <li>how can I prevent an icon from being dropped on top of another icon? (or rather, only allow dropping the icon into an empty div?)</li>
  <li>If I wished to create a second set of icons and replicate the process, how can I keep them and their allowed drop area separate? (so that the icons do not end up in unintended places)</li>
  </ol>
  
  <p>thanks a bunch.</p>