Q:

How can I set child element as droppable to false

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.
Here is my div.
<div class="shortcuts" id="drop1" ondrop="drop(event)" ondragover="allowDrop(event)">
   <a href="javascript:;" class="shortcut"><i class="shortcut-icon icon-list-alt"></i><span class="shortcut-label">Apps</span> </a>
   <a href="javascript:;" class="shortcut"><i class="shortcut-icon icon-bookmark"></i><span class="shortcut-label">Bookmarks</span> </a>
   <a href="javascript:;" class="shortcut"><i class="shortcut-icon icon-signal"></i> <span class="shortcut-label">Reports</span> </a>
   <a href="javascript:;" class="shortcut"> <i class="shortcut-icon icon-comment"></i><span class="shortcut-label">Comments</span> </a>
   <a href="javascript:;" class="shortcut"><i class="shortcut-icon icon-user"></i><span class="shortcut-label">Users</span> </a>
   <a href="javascript:;" class="shortcut"><i class="shortcut-icon icon-file"></i><span class="shortcut-label">Notes</span> </a>
   <a href="javascript:;" class="shortcut"><i class="shortcut-icon icon-picture"></i> <span class="shortcut-label">Photos</span> </a>
   <a href="javascript:;" class="shortcut"> <i class="shortcut-icon icon-tag"></i><span class="shortcut-label">Tags</span> </a>
</div>

This is javascript
    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);

    }

A:

You can attach a new method for child element to not allow dropping on that child . And  inside that method call stopPropagation.
 <div class="shortcuts" id="drop1" ondrop="drop(event)" ondragover="allowDrop(event)">
       <a href="javascript:;" class="shortcut" ondragover="noAllowDrop(event)><i class="shortcut-icon icon-list-alt"></i><span class="shortcut-label">Apps</span> </a>

    </div>

function noAllowDrop(ev) {
        ev.stopPropagation();
    }

