javascript - 如何放置元素/拖放看板之类的东西/到它的初始位置

Question

我是一个编程新手，遇到了一个问题，如下: 我有一个元素“Item 1”，它不会返回到第一个(“motherland”)ul 列表。

通过调试，我知道当我尝试将其从“进行中”、“完成”或返回“待办事项”拖放时，它仅执行拖动功能 - 没有按应有的方式放置 - 为什么？

来自 html 文件:

<div id="board">
    <div>
        <h1>To do</h1>
        <h1>In progress</h1>
        <h1>Done</h1>
    </div>

    <ul id="todo">
        <li id="item1" draggable="true"ondragstart="drag(event)" ondragover="allowDrop(event)" ondrop="drop(event)">Task 1</li>
        <li id="item2">Task 2</li>
    </ul>

    <ul id="inprogress" ondragover="allowDrop(event)" ondrop="drop(event)">
        <li></li>
        <li></li>
    </ul>


    <ul id="done" ondragover="allowDrop(event)" ondrop="drop(event)">
        <li></li>
        <li></li>
    </ul>


</div>

来自js文件:

function allowDrop(e) {
    e.preventDefault();
    //console.log(allowDrop);
}



function drag(e) {
    e.dataTransfer.setData("text", e.target.id);
    console.log(drag);
}



function drop(e) {
    e.preventDefault();
    var data = e.dataTransfer.getData("text");

    e.target.appendChild(document.getElementById(data));


    console.log(drop);
}

Answer 1

将 ondrop="drop(event)"放在 ul 标签中，而不是 li 标签中。