拖放检测答案

【问题标题】：Drag and drop detection拖放检测
【发布时间】：2014-09-27 22:43:34
【问题描述】：

我的任务只是检测元素何时在放置区/离开放置区/放置在放置区中。谁能解释一下为什么浏览器没有检测到 drop 事件。

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 事件中添加行 this.preventDefault() 并没有任何区别。

这里是 JS Bin 链接：http://jsbin.com/ledur/2/edit

【问题讨论】：

它必须是event.preventDefault()，其中event 是传递给回调的参数，而不是this.preventDefault()
@PatrickEvans 仍然没有工作......
@PatrickEvans 仍然没有工作。在这里发布问题之前，我已经尝试过了。这里是JS斌：jsbin.com/ledur/3/edit
我在 javascript 控制台中收到控制台消息，甚至是 drop 事件控制台消息。什么不工作？你用的是什么浏览器？
您发布的答案有效，错误在于在dragover 中使用this 而不是e。重新发布您的答案，以便我将其选为正确的。

标签： javascript events dom drag-and-drop

【解决方案1】：

drop 和 dragover 事件中需要 preventDefault

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

【讨论】：