CODEWITHSUNDEEP
csshtml
Whoami
Whoami

Reputation: 14408

HTML5 drop event is not getting triggered.

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?

Upvotes: 0

Views: 3453

Answers (2)

Michael Homm&#233;
Michael Homm&#233;

Reputation: 1726

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

Upvotes: 5

The scion
The scion

Reputation: 972

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>

Upvotes: 0

Related Questions