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

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

但它不工作，似乎当您尝试拖动它，鼠标切换到“我正在拖动某个东西”光标，但标签不被拖动。任何想法为什么&如何使其工作？

要在（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>