小编Zer*_*ras的帖子

我在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"中,这是一个已被拖入的元素.这导致了我不想发生的元素嵌套.我怎么能阻止这个？