多个拖放html jquery

Question

我想在元素列表上创建一个拖放系统。 这是我期待的图片：

我会把红色方块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>