3 
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 的目标更改为窗口，它可以工作。

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

我哪里错了？

4

2 回答 2

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 事件

于 2013-09-20T13:36:20.277 回答
0

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

您必须取消 和 的默认操作ondragenter才能ondragover 触发ondrop。在 div 的情况下，默认操作是不删除。这可以与 input type=text 元素的情况形成对比，其中默认操作是 drop。为了允许对 div 进行拖放操作，您必须通过window.event.returnValue=false在 ondragenter和ondragover事件处理程序中指定来取消默认操作。只有这样才会ondrop开火。

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

看小提琴：http://jsfiddle.net/4B8tE/3/

于 2013-09-20T13:58:44.427 回答