Javascript：仅在特定位置放置特定对象

Question

我有几个可拖动的对象和几个可以放置对象的地方。 但我不希望任何东西掉在任何地方。 假设对象 A 应该只放在位置 1，对象 B 应该只放在位置 2。

我发现摆弄“function drop(event)”并不是一个好主意。 如果 Firefox 无法删除，它会尝试重定向并转到 name-of-my-object.com 站点。

将 .ondragover 设置为“return false;”，即使在特定条件下（即这个地方的错误对象）也会使所有对象无法删除该地方。

使用

document.addEventListener("dragover", function(event) {
      event.preventDefault();
      });

再次获得接受对象的地方是不分青红皂白的：每个地方都接受任何对象。

我已经为此奋斗了一天多，并且尽我所能，我在网上的任何地方都找不到有效的示例。

Answer 1

干扰的功能是“功能allowDrop（事件）”。

完整的功能示例：

 var draggedObject = ""; var sentence = ""; var rectangle = ""; var canDrop = true; function dragStart(event) { event.dataTransfer.setData("text", event.target.id); draggedObject = event.dataTransfer.getData("text"); document.getElementById("textHere").innerHTML = draggedObject + " is moving<br>"; } function allowDrop(event) { event.preventDefault(); if (event.dataTransfer.getData("text") == "drag1") { sentence = "<br>" + draggedObject + " is OVER "; } if (event.dataTransfer.getData("text") == "drag2") { sentence = "<br>" + draggedObject + " is OVER "; } rectangle = event.target.id; if (rectangle == 'droptarget2') { document.getElementById("textHere").innerHTML = sentence + "droptarget2"; } else { document.getElementById("textHere").innerHTML = sentence + "droptarget1"; } if ((rectangle == 'droptarget2') && (draggedObject == 'drag1')) canDrop = false; if ((rectangle == 'droptarget1') && (draggedObject == 'drag2')) canDrop = false; if ((rectangle == 'droptarget1') && (draggedObject == 'drag1')) canDrop = true; if ((rectangle == 'droptarget2') && (draggedObject == 'drag2')) canDrop = true; } function drop(event) { event.preventDefault(); if (canDrop == false) return; var data = event.dataTransfer.getData("Text"); event.target.appendChild(document.getElementById(data)); document.getElementById("demo").innerHTML = draggedObject + " was dropped."; }

 .droptarget1 { float: left; width: 200px; height: 35px; margin: 15px; margin-top: 15px; padding: 10px; border: 1px solid #aaaaaa; background: lightgreen; } .droptarget2 { float: left; width: 200px; height: 35px; margin: 15px; margin-top: 15px; padding: 10px; border: 1px solid #aaaaaa; background: pink; } .drag1 { color: green; } .drag2 { color: red; }

 <table> <tr> <td colspan="2"> <h3> Drag and drop possibilities : </h3> <p>The green "Drag1" text can only be dropped into the green rectangle. The red "Drag2" text can only be dropped into the pink rectangle. </p> </td> </tr> <tr> <td> <div ondragstart="dragStart(event)" draggable="true" id="drag1" name="drag1" class="drag1">Drag1</div> </td> <td> <div ondragstart="dragStart(event)" draggable="true" id="drag2" name="drag2" class="drag2">Drag2</div> </td> </tr> <tr> <td> <div id="droptarget1" class="droptarget1" name="droptarget1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> </td> <td> <div id="droptarget2" class="droptarget2" name="droptarget2" ondrop="drop(event)" ondragover="allowDrop(event)"></div> </td> </tr> <tr> <td> <div id="textHere"></div> </td> </tr> </table> <p id="demo"></p>