HTML5 drop 事件没有被触发。答案

【问题标题】：HTML5 drop event is not getting triggered.HTML5 drop 事件没有被触发。
【发布时间】：2016-11-07 17:06:21
【问题描述】：

我正在学习 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 控制台消息正在打印。我做错了什么？

【问题讨论】：

Drop event not firing in chrome的可能重复

标签： css html

【解决方案1】：

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

澄清一下：

来自 Mozilla：

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

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

如果您希望允许放置，则必须通过取消事件来防止默认处理。您可以通过从属性定义的事件侦听器返回 false 或调用事件的 preventDefault() 方法来做到这一点。"

【讨论】：

上帝。你救了我的命。它就像一个魅力。有趣的是，在 dropOver 中调用这个函数又有什么关系呢？
很高兴它起作用了，我在上面做了一些澄清，希望对您有所帮助。

【解决方案2】：

link

我添加的功能

function allowDrop(ev) {
    ev.preventDefault();
}

我从 sourceDrag div 调用它。我还在draggable="true" insdtead of draggable=true 中添加了双引号

 <html>
    <head>
      My head 
    <script>
function dragme(event)
{
  event.dataTransfer.setData("sourceID", event.target.id);
}

function dropHere(event)
{

  alert ("inside drop Here..");event.preventDefault();
}

function dropOver(event)
{
  console.log ("inside drop Over.."+event);
}
function allowDrop(ev) {
    ev.preventDefault();
}
</script>
<style>

div {width:500px;height:400px;border-color:red;border-style:solid;}
</style>
</head>
<body>
<div id="sourcedrag" ondrop="dropHere(event)" ondragover="allowDrop(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>

【讨论】：