javascript - 如何防止html中可拖动元素重叠

Question

我创建了一个文本框，在其中拖动动态创建的 div。但如果我将 div 放在其他放置的 div 上，它们就会重叠。我必须将它们垂直排列。在 jQuery 中，我找到了很多解决方案，但我需要纯 JavaScript。请帮助我并提出建议。

我使用的html:

<div id="area1" align="center" ondrop="drop(event)" ondragover="allowDrop(event)" ></div>

我使用过的CSS:

#area1 {
    float:left;
    width:25%;
    height:240px;
    padding:10px;
    border:1px solid #A485D8;
    margin-left: 10px;
    margin-right: 10px;
    padding-top:10px;
}

Answer 1

问题是具有属性 draggable="true" 的元素被删除到类似的(可拖动)元素。

似乎 ondrop 事件的相同函数也应用于可拖动元素。

为了避免这种情况，您应该在为 ondrop 事件调用的函数中添加一些条件。下面是一个例子。

<div id="area1" align="center" ondrop="drop(event)" ondragover="allowDrop(event)" ></div>

function drop(ev) 
{
if(ev.target.className=='into' || ev.target.className=='options_list')
    {
    var incoming_id = ev.dataTransfer.getData("incoming_choice")
    ev.preventDefault();
    ev.target.appendChild(document.getElementById(incoming_id));
    }
}

就我而言，我希望可拖动元素仅放入 className 为 'options_list' 或 'into' 的元素中>。它不应该被放入另一个可拖动对象中。我的代码中的 Draggables 的 className 是 'match_choice'。同样，您可以使用 id 而不是 className 进行比较。