1

我创建了一个文本框，在其中拖动动态创建的 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;
}
4

2 回答 2

1

问题是具有属性的元素draggable="true"被拖放到类似的（可拖动的）元素中。

似乎以某种方式同样的ondrop事件函数也应用于可拖动元素。

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

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

于 2017-03-18T17:25:43.090 回答
0

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

#area1 *
{
    position:relative;
    display:block;
}
于 2012-12-03T12:55:26.223 回答