multiple drag n drop html jquery

Question

我想在元素列表中創建一個拖放n拖放系統。 這裏是我期待的圖片：

我會採取紅色方塊1，把它放在第一個方形的黑色。如果我將紅色方塊2放到黑色方塊1中，它將移除紅色方塊1（它回到紅色方塊列表中），並將紅色方塊2取代。

在這裏，我正在嘗試，但它沒有完成這項工作！

HTML：

       <ul class="list-inline"> 
            <li><div id="drag1" draggable="true" ondragstart="drag(event)"> ceci est un test 1</div></li> 
            <li><div id="drag1" draggable="true" ondragstart="drag(event)"> ceci est un test 2</div></li> 
            <li><div id="drag1" draggable="true" ondragstart="drag(event)"> ceci est un test 3</div></li> 
           </ul> 

的jQuery：

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

非常感謝您的幫助！

Answer 1

更改ID的應用程序如無法理解哪一個塊你嘗試拖動

<ul class="list-inline"> 
            <li><div id="drag1" draggable="true" ondragstart="drag(event)"> ceci est un test 1</div></li> 
            <li><div id="drag2" draggable="true" ondragstart="drag(event)"> ceci est un test 2</div></li> 
            <li><div id="drag3" draggable="true" ondragstart="drag(event)"> ceci est un test 3</div></li> 
           </ul>