HTML5 drop 事件没有被触发。
Posted
技术标签:
【中文标题】HTML5 drop 事件没有被触发。【英文标题】：HTML5 drop event is not getting triggered. 【发布时间】：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的可能重复 【参考方案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>
【讨论】：
以上是关于HTML5 drop 事件没有被触发。的主要内容，如果未能解决你的问题，请参考以下文章