Question

我正在制作一个“播放列表”样式界面，您可以在其中从每个播放列表中来回拖放元素。每个元素都是一个div（到目前为止还没有ul方法）。我正在使用核心可拖动的JS代码，一切正常，直到我开始玩它们更多：

a）如果我将元素1拖到元素2的下方或上方（在同一个容器内），而不是向上或向下推动元素2，它实际上将我拖动的元素1插入到元素2中（有时它甚至会消失），以2个元素结束，包括可拖动的div。

c）如果我将元素X拖到任何空容器或已填充的容器但在实际内容下方有足够的可用空间，它可以正常工作，但是当我再次尝试将其移动到顶部容器区域时，或尝试安排在其他人之间给出的任何一个，它会再次插入到更靠近掉落点的列出的元素中。

有关如何避免这种情况的任何想法？所有这些都是随机的，你可以看到，有时候它堆叠得恰到好处，有时则没有。

提前致谢！

我的代码：

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));
}

.mycontainer {
  float: left;
  width: 200px;
  min-height: 50px;
  margin: 10px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}
.myelement {
  display: block;
  width: 100%;
  max-height: 30px;
  margin-top: 2px;
  font-family: Arial, sans-serif;
}

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)" class="mycontainer">
  <div draggable="true" ondragstart="drag(event)" id="drag1" class="myelement">ELEMENT 1</div>
  <div draggable="true" ondragstart="drag(event)" id="drag2" class="myelement">ELEMENT 2</div>
  <div draggable="true" ondragstart="drag(event)" id="drag3" class="myelement">ELEMENT 3</div>
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)" class="mycontainer"></div>

可拖动的div堆叠不起作用（没有使用框架）

0 个答案: