Question

我正在尝试使用两个区域，一个区域已经填充了可拖动到其他区域的可拖动区域。

按照this底部的示例，我执行了以下操作：

<div class="well partis-in" ondrop="drop(event)" ondragover="allowDrop(event)">
<!-- Drag from here -->
  <div class="label label-danger partis" draggable="true" ondragstart="drag(event)">PS</div><br>
  <div class="label label-warning partis" draggable="true" ondragstart="drag(event)"> UDI</div><br>
  <div class="label label-success partis" draggable="true" ondragstart="drag(event)"> EELV</div><br>
  <div class="label label-info partis" draggable="true" ondragstart="drag(event)"> Les Républicains</div><br>
  <div class="label label-default partis" draggable="true" ondragstart="drag(event)"> FN</div><br>
</div>

<div class="well partis-out" ondrop="drop(event)" ondragover="allowDrop(event)">
<!-- ...to here -->
</div>

我的javascript：

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

但它不起作用，似乎当你试图拖动它时，鼠标切换到“我正在拖动某些东西”光标，但标签没有被拖动。知道为什么＆amp;如何让它发挥作用？

要在（in）操作中查看here is the codeply。

注意：一旦解决了这个问题，接下来的步骤就是：

1）确保可以在右侧框中以任何方式订购元素

2）当用户点击“Valider”时，右边框中元素的顺序将被发送到后端。

如果您认为上述代码无法实现，请告诉我。

Answer 1

所有部分都存在，您只是错过了每个标签上的id属性。问题是，你试图通过“id”将元素附加到拖放区域，但是你的元素没有id。

<div class="well partis-in" ondrop="drop(event)" ondragover="allowDrop(event)">
<!-- Drag from here -->
  <div id="id1" class="label label-danger partis" draggable="true" ondragstart="drag(event)">PS</div><br>
  <div id="id2" class="label label-warning partis" draggable="true" ondragstart="drag(event)"> UDI</div><br>
  <div id="id3" class="label label-success partis" draggable="true" ondragstart="drag(event)"> EELV</div><br>
  <div id="id4" class="label label-info partis" draggable="true" ondragstart="drag(event)"> Les Républicains</div><br>
  <div id="id5" class="label label-default partis" draggable="true" ondragstart="drag(event)"> FN</div><br>
</div>

将元素从一个区域拖到另一个区域

1 个答案: