要素をある領域から別の領域にドラッグ

Question

私は2つの領域を持っています.1つはすでに他の領域にドラッグできるドラッグ可能な領域があります。

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。

NB：これが解決されれば、私の次のステップは次のとおりです。

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>