將元素從一個區域拖拽到另一個區域

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>