HTML5丢弃事件没有被触发。

我正在学习HTML中的拖放程序，并且我尝试了下面的代码。HTML5丢弃事件没有被触发。

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

来源

2016-07-05 Whoami

的[Drop事件无法在Chrome射击]可能重复的（http://stackoverflow.com/questions/21339924/drop-event-not-firing-in -chrome） – showdev

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

澄清：

从Mozilla的：

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

“的网页或应用程序的大部分地区没有有效地丢弃数据。因此，这些事件的默认处理不允许下降

如果你想让允许放下，你必须通过取消事件来阻止默认处理。你可以通过返回false f rom属性定义的事件侦听器，或通过调用事件的preventDefault（）方法。“

来源

2016-07-05 18:59:24 pmahomme

上帝。你救了我的命。它像一个魅力。有趣的是，在dropOver中调用这个函数又有什么关系呢？ – Whoami

很高兴它的工作，我上面澄清了一些，希望它有帮助。 – pmahomme

link

我加的

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

功能，我把它从sourceDrag股利。我也加双引号draggable="true" insdtead 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>

来源

2016-07-05 18:59:47

HTML5丢弃事件没有被触发。

回答

相关问题