启用后如何取消允许拖动preventDefault？

问题描述

我正在尝试创建一个大 div，人们可以将小 div 拖入其中。但问题是您可以将一个小 div 拖动到另一个小 div 中，这不是所需的行为. 这是我的代码：

<style>

div#box,div#box2 {
    float: left;
    width: 40px;
    height: 150px;
    margin: 10px;
    padding: 15px;
    border: 1px solid black;
    background: #eee;
}

div.num {
    background: #ddd;
    border: 1px solid black;
    width: 15px;
    height: 15px;
    margin: 5px;
    margin-bottom: 12px;
    padding: 5px;
}

span {
    padding-right: 15px;
    padding-bottom: 20px;
}

</style>
<script>
//got this on w3schools
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="box" ondrop="drop(event)" ondragover="allowDrop(event)">
    <div class="num" id="num1" draggable="true" ondragstart="drag(event)">1</div>
    <div class="num" id="num2" draggable="true" ondragstart="drag(event)">2</div>
    <div class="num" id="num3" draggable="true" ondragstart="drag(event)">3</div>
    <div class="num" id="num4" draggable="true" ondragstart="drag(event)">4</div>
</div>
<div id="box2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

注意：这与之前的帖子不是重复。我试过 ondragover="" 和 ondropover=""，但都没有奏效。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）