Question

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

$('#cover-drop-zone').ondrop = function(e) {
    alert('drop');
    return false;
};

我有上面的JS。

这是我的HTML。

<div id="cover-drop-zone" class="image-drop-zone"><i class="icon-plus"></i></div>

当我将图像从我的计算机拖到浏览器窗口时，在＃cover-drop-zone上没有任何反应。

如果我将ondrop的目标更改为窗口，则可以正常工作。

但我不希望用户能够将图像拖动到窗口中的任何位置。

我哪里错了？

Answer 1

存在一些跨浏览器方法：

<div class="drop_panel"> 
  drop here 
  <input class="hidden_input" type="file" >
</div>

和CSS：

.drop_panel {
  padding: 50px;
  position: relative;
}
.hidden_input {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
}

如果丢弃的文件触发.hidden_input onChange事件

Answer 2

这是来自MSDN：http://msdn.microsoft.com/en-us/library/ie/ms536929(v=vs.85).aspx

您必须取消ondragenter和ondragover的默认操作为ondrop开火。在div的情况下，默认行动不是放弃。这可以与a的情况形成对比 input type = text element，默认操作将丢弃。为了要允许对div进行拖放操作，您必须取消默认值通过在两者中指定window.event.returnValue=false来执行操作 ondragenter和ondragover个事件处理程序。只有这样ondrop才会开火。

但是，我发现你必须取消ondragover而不是两者。

请参阅小提琴： http://jsfiddle.net/4B8tE/3/

将图像从计算机拖到div？

2 个答案: