我正在使用 javascript 制作一款生存游戏，现在我正在设置所有功能。我制作了一个库存系统，您可以在其中查看下一个和上一个元素，它会显示元素的描述、编号、图像和名称。现在我有两个按钮可以让你获取和放下元素，但我希望能够将元素的图像从描述中拖到主游戏屏幕上并放下它，而无需实际移动图像。
我试过在拖动图像时检测图像的位置，并检查它是否在游戏屏幕 div 中，但最终发生的是图像在正确位置时调用的函数甚至发生如果图像没有被丢弃。
var img = document.getElementById('img');
var div = document.getElementById('div');
var divLocation = div.getBoundingClientRect();
var p = document.getElementsByTagName('p');
var time = 0;
img.addEventListener('drag', function() {
p[0].innerHTML = event.clientX;
p[1].innerHTML = event.clientY;
p[2].innerHTML = divLocation.left;
p[3].innerHTML = divLocation.top;
if (event.clientX - divLocation.left >= 0 && event.clientX - divLocation.left <= 200) {
if (event.clientY - divLocation.top >= 0 && event.clientY - divLocation.top <= 200) {
if (time == 1) {
alert("test");
time = 0;
setTimeout(1000);
}
}
}
});
setInterval(function() {
time++;
if (time > 1) {
time = 0;
}
}, 1000);
<img src="download.jpg" id="img">
<div id="div"></div>
当您将图像放到游戏屏幕 div 中而不移动图像时，我希望元素数量的变量减少 1，但现在当图像悬停在 div 上时，该功能发生。
最佳答案
这是一个简单但完整的拖放实现。
请注意图像被拖放、放置、收集，但没有移动。
您需要单击预览中的“整页”链接。将图像拖到虚线边框的拖放区。
document.querySelector('img').addEventListener('dragstart', dragstart_handler);
document.querySelector('img').addEventListener('dragend', dragend_handler);
document.getElementById('dropzone').addEventListener('drop', drop_handler);
document.getElementById('dropzone').addEventListener('dragover', dragover_handler);
document.getElementById('dropzone').addEventListener('dragleave', dragleave_handler);
const collectedItems = [];
function dragstart_handler(ev) {
ev.currentTarget.style.border = "dashed";
ev.dataTransfer.setData("text", ev.target.dataset.item);
ev.effectAllowed = "none";
}
function dragover_handler(ev) {
ev.currentTarget.style.backgroundColor = "lightblue";
ev.preventDefault();
}
function dragleave_handler(ev) {
ev.currentTarget.style.backgroundColor = "white";
ev.preventDefault();
}
function drop_handler(ev) {
ev.currentTarget.style.backgroundColor = "white";
collectedItems.push(ev.dataTransfer.getData("text"));
console.log(collectedItems);
document.getElementById('items').textContent = `Number of items collected: ${collectedItems.length}`;
ev.preventDefault();
}
function dragend_handler(ev) {
ev.target.style.border = "solid black";
ev.dataTransfer.clearData();
}#dropzone {
position: fixed;
right: 0;
bottom: 0;
width: 200px;
height: 200px;
border: 1px dashed blue;
}<!DOCTYPE html>
<html lang=en>
<body>
<img data-item="mace" draggable src="https://via.placeholder.com/150">
<p id="items"></p>
<div id="dropzone"></div>
</body>
</html>关于javascript - 有没有办法检测图像是否已被拖放到 div 中而不移动图像？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56716971/