如何將子元素設置爲可丟棄

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(); 
    }