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

【问题标题】：How can I set child element as droppable to false如何将子元素设置为可丢弃为 false
【发布时间】：2016-09-05 07:08:24
【问题描述】：

我有一个可放置的 div 元素。它有 a(link) 元素和 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);

    }

【问题讨论】：

标签： javascript jquery html drag-and-drop

【解决方案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();
    }

【讨论】：