Javascript 使用html5拖放，从拖放（事件）更改为allowDrop（事件）

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

使用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>

div[id^='div']
{浮点：左；宽度：100px；高度：35px；边距：10px；填充：10px；边框：1px实心35; aaaaaa；}
功能allowDrop（ev）
{
ev.preventDefault（）；
}
功能阻力（ev）
{
ev.dataTransfer.setData（“文本”，ev.target.id）；
}
功能下降（ev）
{
ev.preventDefault（）；
var data=ev.dataTransfer.getData（“文本”）；
ev.target.appendChild（document.getElementById（数据））；
}

这是一个练习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> 

订单1
订单2
订单3
订单4
订单5
订单4
订单5

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

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