HTML5 drop event is not getting triggered.

Question

i am learning the drag and drop program in html, and i tried the below code.

<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>

Unfortunately, the alert box inside dropHere is not getting invoked. But dropOver console message is getting printed. What am i doing wrong?

Possible duplicate of [Drop event not firing in chrome](http://stackoverflow.com/questions/21339924/drop-event-not-firing-in-chrome) — showdev, Jul 05 '16 at 18:58

Michael Hommé · Accepted Answer · 2016-07-05T19:19:20.893

5

You'll need to add event.preventDefault(); to your dropOver function as well.

To clarify:

From Mozilla:

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

"Most areas of a web page or application are not valid places to drop data. Thus, the default handling of these events is not to allow a drop.

If you want to allow a drop, you must prevent the default handling by cancelling the event. You can do this either by returning false from an attribute-defined event listener, or by calling the event's preventDefault() method."

edited Jul 05 '16 at 19:19

answered Jul 05 '16 at 18:59

Michael Hommé

1,696
1
14
18

God. You saved my life. It works like a charm. Interestingly, how does that matter of invoking this function in dropOver too ? – Whoami Jul 05 '16 at 19:02
Glad it worked, I aded some clarification above, hope it helps. – Michael Hommé Jul 05 '16 at 20:02

The scion · Answer 2 · 2016-07-05T19:05:39.600

link

I added function of

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

And I call it from sourceDrag div. Also I added double quotes to 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 event is not getting triggered.

2 Answers2