CODEWITHSUNDEEP
javascripteventsdomdrag-and-drop
Ivan Pandžić
Ivan Pandžić

Reputation: 373

Drag and drop detection

My task was only to detect when element is in drop zone/leaves drop zone/dropped in drop zone. Can someone explain me why browser isn't detecting drop event.

content2.addEventListener("dragenter",function(){
console.log("Pic is in drop zone.");
},false);


content2.addEventListener("dragleave",function(){
console.log("Picture is no longer in drop zone");
},false);

content2.addEventListener("drop",function(){
console.log("Picture dropped in drop zone");
},false);

I know that drop is by default disabled, but adding line this.preventDefault() in drop event didn't make any difference.

Here is JS Bin link:http://jsbin.com/ledur/2/edit

Upvotes: 1

Views: 142

Answers (1)

Patrick Evans
Patrick Evans

Reputation: 42746

You need preventDefault in drop and dragover events

content2.addEventListener("dragover",function(e){
  e.preventDefault();
},false);

content2.addEventListener("dragenter",function(e){
  console.log("Pic is in drop zone.");
},false);

content2.addEventListener("dragleave",function(){
  console.log("Picture is no longer in drop zone");
},false);

content2.addEventListener("drop",function(e){
  e.preventDefault();
  console.log("Picture dropped in drop zone");
},false);

Modified JSBin

Upvotes: 1

Related Questions