javascript - 子元素允许拖放

Question

我在 html5 中遇到拖放问题。

面板 A 列出了您可以拖动的元素类型。面板 B 是拖动元素的地方。面板 C 和 D 是您可以拖动元素的其他地方，您可以在面板 B、C 和 D 之间拖动和重新排列元素。

我的问题是我可以拖动一个元素并将其放到面板之一内的另一个元素的内部，我不希望用户能够这样做。这些面板的子元素没有附加任何类型的 javascript 或与拖动相关的属性，但它们目前允许在其中拖动元素。

我试过附加“ondrop='return false;'”和“ondragover='return false;'”，但都没有用。

肯定有办法关闭元素上的“允许拖入”属性吗？

这是我的代码:

<div id="elem-002" draggable="true" ondragstart="drag(event)">content</div>

主面板:

<div id="panel-b" ondrop="drop(event)" ondragover="allowDrop(event)">
  <div id="elem-001" draggable="true" ondragstart="drag(event)">content</div>
</div>

JS:

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");
    ev.target.appendChild(document.getElementById(data));
}

换句话说:我可以将我的“elem-002”直接拖到“elem-001”中，这是一个已经拖入的元素。这导致了我不想发生的元素嵌套。我怎样才能避免这种情况？

Answer 1

基本上，您必须在 allowDrop 中设置正确的 ev.dataTransfer.dropEffect。对于您的 draggable 元素，它应该是 "none"(不允许拖放)，对于其他所有内容(或任何其他允许拖放的元素)为 "所有”

进一步阅读 dropEffect

实例:

window.allowDrop = function(ev) {
    ev.preventDefault();
    if (ev.target.getAttribute("draggable") == "true")
        ev.dataTransfer.dropEffect = "none"; // dropping is not allowed
    else
        ev.dataTransfer.dropEffect = "all"; // drop it like it's hot
};

window.drag = function(ev) {
    ev.dataTransfer.setData("id", ev.target.id);
};

window.drop = function(ev) {
    ev.preventDefault();
    var id = ev.dataTransfer.getData("id");

    var dragged = document.getElementById(id);
    ev.target.appendChild(dragged);
    dragged.className += " dropped";
};

.drag {
    display: inline-block;
    padding: 5px;
    background: rgba(0, 0, 0, 0.2);
    margin: 2px;
}

.dropzone {
    background: #ccc;
    padding: 5px;
    margin-top: 10px;
}

<div id="first" class="drag" draggable="true" ondragstart="drag(event)">1</div>
<div id="second" class="drag" draggable="true" ondragstart="drag(event)">2</div>

<div class="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)"><div id="third" class="drag dropped" draggable="true" ondragstart="drag(event)">3</div></div>