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 の対象を window に変更すると動作します。

しかし、ユーザーがウィンドウ内のどこにでも画像をドラッグできるようにしたくありません。

どこが間違っていますか？

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とのデフォルト アクションをキャンセルする必要があります。div の場合、デフォルトのアクションはドロップしないことです。これは、デフォルトのアクションがドロップである input type=text 要素の場合と対照的です。div でのドラッグ アンド ドロップ アクションを許可するには、とイベント ハンドラーの両方で指定して 、既定のアクションをキャンセルする必要があります。その時だけ発砲します。ondragoverondropwindow.event.returnValue=falseondragenterondragoverondrop

ondragoverしかし、両方ではなくキャンセルする必要があることがわかりました。

フィドルを参照してください：http://jsfiddle.net/4B8tE/3/

于 2013-09-20T13:58:44.427 に答える