拖放检测

Question

我的任务只是检测元素何时处于放置区域/离开放置区域/丢弃放置区域。有人可以解释一下为什么浏览器没有检测到丢弃事件。

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

我知道默认情况下会停用放置，但在放置事件中添加行this.preventDefault()并没有任何区别。

以下是JS Bin链接： http://jsbin.com/ledur/2/edit

Answer 1

preventDefault和drop事件

中需要dragover

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