拖放檢測

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

我知道drop是默認禁用的，但在drop event中添加行this.preventDefault()並沒有什麼區別。

這裏是JS斌鏈接：http://jsbin.com/ledur/2/edit

Answer 1

您在drop需要preventDefault和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