我正在学习 html 中的拖放程序，我尝试了下面的代码。
<html>
<head>
My head
<script>
function dragme(event)
{
event.dataTransfer.setData("sourceID", event.target.id);
}
function dropHere(event)
{
event.preventDefault();
alert ("inside drop Here..");
}
function dropOver(event)
{
console.log ("inside drop Over..");
}
</script>
<style>
div {width:500px;height:400px;border-color:red;border-style:solid;}
</style>
</head>
<body>
<div id="sourcedrag" ondrop="dropHere(event)" ondragover="dropOver(event)">
inside div
</div>
<button draggable=true id="button" ondragstart="dragme(event)" >Press me </button>
<button draggable=true id="button1"> Second Press me </button>
<button draggable=true id="button2"> Second Press me </button>
<button draggable=true id="button3"> Second Press me </button>
<button draggable=true id="button4"> Second Press me </button>
</body>
</html>
不幸的是，dropHere 中的警告框没有被调用。但是正在打印 dropOver 控制台消息。我做错了什么？
最佳答案
您还需要将 event.preventDefault(); 添加到您的 dropOver 函数中。
澄清一下:
来自 Mozilla:
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Drag_operations#droptargets
“网页或应用程序的大部分区域都不是放置数据的有效位置。因此，对这些事件的默认处理是不允许放置。
如果您希望允许放置，您必须通过取消事件来阻止默认处理。您可以通过从属性定义的事件监听器返回 false 或调用事件的 preventDefault() 方法来执行此操作。”
关于css - 未触发 HTML5 放置事件。，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38210583/