Перетаскивание элементов из одной области в другую

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) action, here is the codeply.

NB: как только это будет решена, мои следующие шаги:

1), убедившись, что элементы могут быть заказаны любым способом, пользователь хочет в окне справа

2), когда пользователь нажимает на «Valider» порядок элементов в поле справа будет отправлен на бэкэнд.

Если вы считаете, что это не будет достигнуто с помощью приведенного выше кода, пожалуйста, скажите мне.

Answer 1

Все части есть, вы просто не указали атрибут 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>