我正在尝试解决此拖放代码的问题。当我尝试拖动一个不是8的图像时，8会自动上升，并且我无法将任何其他图像拖动到div框中。
同样，在拖动图像后，如果要进入google中的检查模式，如果您尝试将8拖动到图像应进入的框中，则google会显示一条消息：
Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
at drop (Assignment10.html:41)
at HTMLDivElement.ondrop (Assignment10.html:50)
如何修复此代码？
我实际上没有尝试过任何东西，因为我不知道如何解决此代码。
//JS for the drag-and-drop
function drag(event) {
event.dataTransfer.setData("Text", event.target.id);
}
function permitDrop(event) {
event.preventDefault();
}
function drop(event) {
event.preventDefault();
var data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
}#draginto {
width: 1520px;
height: 200px;
border-style: solid;
border-width: 1px;
}
#cards {
width: 64%;
}
#cards img {
float: right;
margin: 2px;
display: block;
}!-- The box the images are dragged into--
<div id="draginto" ondragover="permitDrop(event)" ondrop="drop(event)">
</div>
!--The div with the cards in them--
<div id="cards">
<img src="https://via.placeholder.com/100x100?text=d8" draggable="true" id="dragto" ondragstart="drag(event)">
<img src="https://via.placeholder.com/100x100?text=dJ" draggable="true" id="dragto" ondragstart="drag(event)">
<img src="https://via.placeholder.com/100x100?text=dK" draggable="true" id="dragto" ondragstart="drag(event)">
<img src="https://via.placeholder.com/100x100?text=d10" draggable="true" id="dragto" ondragstart="drag(event)">
<img src="https://via.placeholder.com/100x100?text=dQ" draggable="true" id="dragto" ondragstart="drag(event)">
<img src="https://via.placeholder.com/100x100?text=d9" draggable="true" id="dragto" ondragstart="drag(event)">
</div>我希望所有图像都可以拖到框中，而不仅仅是一个。
dragto。event.target为#dragintodiv，如果是，则移动拖动的项目，否则不执行任何操作：像这样：
function drop(event) {
let target = event.target;
if(target.id === "draginto") {
event.preventDefault();
var data = event.dataTransfer.getData("Text");
target.appendChild(document.getElementById(data));
}
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句