title: How can I set child element as droppable to false
body: <p>I have a div element which is droppable. And it has a(link) elements and span elements. I drag an element to div its work perfectly but when i drag over to a element and drop it the element going to a element's inside.</p>
  
  <p>Here is my div.</p>
  
  <pre><code>&lt;div class="shortcuts" id="drop1" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;
     &lt;a href="javascript:;" class="shortcut"&gt;&lt;i class="shortcut-icon icon-list-alt"&gt;&lt;/i&gt;&lt;span class="shortcut-label"&gt;Apps&lt;/span&gt; &lt;/a&gt;
     &lt;a href="javascript:;" class="shortcut"&gt;&lt;i class="shortcut-icon icon-bookmark"&gt;&lt;/i&gt;&lt;span class="shortcut-label"&gt;Bookmarks&lt;/span&gt; &lt;/a&gt;
     &lt;a href="javascript:;" class="shortcut"&gt;&lt;i class="shortcut-icon icon-signal"&gt;&lt;/i&gt; &lt;span class="shortcut-label"&gt;Reports&lt;/span&gt; &lt;/a&gt;
     &lt;a href="javascript:;" class="shortcut"&gt; &lt;i class="shortcut-icon icon-comment"&gt;&lt;/i&gt;&lt;span class="shortcut-label"&gt;Comments&lt;/span&gt; &lt;/a&gt;
     &lt;a href="javascript:;" class="shortcut"&gt;&lt;i class="shortcut-icon icon-user"&gt;&lt;/i&gt;&lt;span class="shortcut-label"&gt;Users&lt;/span&gt; &lt;/a&gt;
     &lt;a href="javascript:;" class="shortcut"&gt;&lt;i class="shortcut-icon icon-file"&gt;&lt;/i&gt;&lt;span class="shortcut-label"&gt;Notes&lt;/span&gt; &lt;/a&gt;
     &lt;a href="javascript:;" class="shortcut"&gt;&lt;i class="shortcut-icon icon-picture"&gt;&lt;/i&gt; &lt;span class="shortcut-label"&gt;Photos&lt;/span&gt; &lt;/a&gt;
     &lt;a href="javascript:;" class="shortcut"&gt; &lt;i class="shortcut-icon icon-tag"&gt;&lt;/i&gt;&lt;span class="shortcut-label"&gt;Tags&lt;/span&gt; &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is javascript</p>
  
  <pre><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");
          document.getElementById(data).className = "shortcut"; 
          var nodeCopy = document.getElementById(data).cloneNode(true);            
          nodeCopy.id = data + "shortCut"; /* We cannot use the same ID */
          ev.target.appendChild(nodeCopy);
  
      }
  </code></pre>