使用html5拖拽，从drop(event)改为allowDrop(event)

Question

这是我的第一篇文章，如果格式不正确，我提前道歉。

使用 html5 拖放我希望在将孩子放入容器后将 ondrop 值从 drop(event) 更改为 allowDrop(event)。

这样做的原因是，一旦将子对象放入容器中，就不允许用户将其他子对象放入同一个容器中。

此外，如果孩子被移出容器，我希望 ondrop 值从 allDrop(event) 更改为 drop(event)。

首先我有 css 和脚本。

<style type="text/css">
div[id^='div']
{float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
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));
}
</script>

这是一个练习html表。

<table border="1" cellpadding="2">
    <tr>
        <td>
            <table>
                <tr><td><div id="div1" ondrop="allowDrop(event)" ondragover="drop(event)"></div></td></tr>
                <tr><td><div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td></tr>
                <tr><td><div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td></tr>
                <tr><td><div id="div4" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td></tr>
                <tr><td><div id="div5" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td></tr>
                <tr><td><div id="div6" ondrop="allowDrop(event)" ondragover="allowDrop(event)"></div></td></tr>
                <tr><td><div id="div7" ondrop="allowDrop(event)" ondragover="allowDrop(event)"></div></td></tr>
            </table>
        </td>
        <td>
            <table>
                <tr><td><div id="div10" ondrop="drop(event)" ondragover="allowDrop(event)"><div draggable="true" ondragstart="drag(event)" id="drag1">Order 1</div></div></td></tr>
                <tr><td><div id="div11" ondrop="drop(event)" ondragover="allowDrop(event)"><div draggable="true" ondragstart="drag(event)" id="drag2">Order 2</div></div></td></tr>
                <tr><td><div id="div12" ondrop="drop(event)" ondragover="allowDrop(event)"><div draggable="true" ondragstart="drag(event)" id="drag3">Order 3</div></div></td></tr>
                <tr><td><div id="div13" ondrop="drop(event)" ondragover="allowDrop(event)"><div draggable="true" ondragstart="drag(event)" id="drag4">Order 4</div></div></td></tr>
                <tr><td><div id="div14" ondrop="drop(event)" ondragover="allowDrop(event)"><div draggable="true" ondragstart="drag(event)" id="drag5">Order 5</div></div></td></tr>
                <tr><td><div id="div15" ondrop="drop(event)" ondragover="allowDrop(event)"><div draggable="true" ondragstart="drag(event)" id="drag6">Order 4</div></div></td></tr>
                <tr><td><div id="div16" ondrop="drop(event)" ondragover="allowDrop(event)"><div draggable="true" ondragstart="drag(event)" id="drag7">Order 5</div></div></td></tr>
            </table>            
        </td>
    </tr>
</table> 

Answer 1

删除 ondragover 属性（下面代码中的最后一行）对我有用：

function drop(ev){
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
    ev.target.removeAttribute("ondragover");
}