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

使用html5进行拖放，从drop（event）更改为allowDrop（event）

1 个答案: