如何将子元素设置为false [英] How can I set child element as droppable to false

问题描述

我有一个可放置的div元素.它具有一个(link)元素和span元素.我拖动一个元素以使其div完美地工作，但是当我将其拖放到元素上并将其放到元素内部时.

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.

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

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

    }

推荐答案

您可以为子元素附加新方法，以禁止放置该子元素.在该方法内部调用stopPropagation.

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

这篇关于如何将子元素设置为false的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！