title: I can drag and drop images onto other images when I shouldn't be able to
body: <p>I have some pretty simple code that allows me to drag and drop images into different boxes.  When the image is dropped, its parent node deletes it and the area where it was dropped onto appends it.  That works fine.  But if I drag and drop an image onto another image, then for some reason the same ondrop event fires, so the image ends up being deleted, but not re-inserted.</p>
  
  <p>I've tried several things to fix this: adding a second drop function that does nothing and setting the ondrop property of the images to that, creating a "disallowdrop" function for the images that returns false, neither works.  There should be no reason that the drop function is being called when something is dropped onto an image.  I thought that elements don't accept dragged elements by default, anyway.</p>
  
  <p>Here is the code I have:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;style type="text/css"&gt;
              .area {
                  height:150px;
                  width:400px;
                  border:2px solid;
              }   
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body onload="load()"&gt;
  
          &lt;script type="text/javascript"&gt;
  
              function load() {
                  var bottom = document.getElementById("bottom");
                  bottom.appendChild(newDraggableImage("square.jpg", 1));
                  bottom.appendChild(newDraggableImage("triangle.jpg", 2));
                  bottom.appendChild(newDraggableImage("circle.jpg", 3));
              }
  
              function newDraggableImage(source, id) {
                  var image = document.createElement('img');
                  image.src = source;
                  image.id = id;
                  image.draggable = true;
                  image.ondragstart = drag;
                  return image;
              }
  
              function drop(event) {
                  event.preventDefault();
                  var image = document.getElementById(event.dataTransfer.getData('Text'));
                  image.parentElement.removeChild(image);
                  event.target.appendChild(image);
              }
  
              function allowDrop(event) {
                  event.preventDefault();
              }
  
              function drag(event) {
                  event.dataTransfer.setData('Text', event.target.id);
              }
  
          &lt;/script&gt;
          &lt;div id="top"    class="area" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;&lt;/div&gt;
          &lt;div id="bottom" class="area" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;&lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>