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'的元素中。它不应该被放入另一个可拖动的。我的代码中className的可拖动内容为'match_choice'。同样，您可以使用id代替className进行比较。

Answer 2

这只是原始代码。我没有测试过。但它可能有所帮助：

#area1 *
{
    position:relative;
    display:block;
}

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

2 个答案: