如何将子元素设置为可丢弃

Question

我有一个可丢弃的div元素。它有一个（链接）元素和span元素。我拖动一个元素来完美分配它的工作，但是当我拖动到一个元素并将元素放到元素的内部时。

这是我的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> 

这是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); 

    } 

Answer 1

您可以将新方法的子元素不允许未落那个孩子。并在该方法内调用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(); 
    }