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

如何将child元素设置为droppable为false

1 个答案: