HTML5 drop 事件没有被触发。

Question

HTML5 drop 事件没有被触发。

我正在学习 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>

Run Code Online (Sandbox Code Playgroud)

不幸的是，dropHere 内的警报框没有被调用。但是 dropOver 控制台消息正在打印。我究竟做错了什么？

Answer 1

Mic*_*mmé 5

您还需要添加event.preventDefault();到您的函数中。dropOver

澄清：

来自 Mozilla：

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Drag_operations#droptargets

“网页或应用程序的大多数区域都不是删除数据的有效位置。因此，这些事件的默认处理是不允许删除。

如果要允许删除，则必须通过取消事件来阻止默认处理。您可以通过从属性定义的事件侦听器返回 false 或调用事件的 PreventDefault() 方法来执行此操作。”

归档时间：	9 年，2 月前
查看次数：	3200 次
最近记录：	9 年，2 月前