2

これは私が望む動作です:

  1. ユーザーがファイル エクスプローラーからファイルのドラッグを開始する
  2. ファイルがブラウザ ウィンドウ上に置かれると、3 つのドロップ ゾーンが表示されます
  3. ユーザーがファイルのドラッグ アンド ドロップまたはドロップをキャンセルすると、ドロップ ゾーンは消えます。

私が抱えている問題は＃3にあります。オン
を使用すると、ドロップ ゾーンは正常に表示されますが、再度非表示にすることはできません。dragenterdocument

ドラッグが子孫を離れるたびに起動し、ドラッグ領域が点滅するバインディングdragendを試しました。dragleave

どのイベントを聞くのが正しいですか?

4

5 に答える 5

8

私はそれを完全にテストしていませんが、すべての要素で発生するdragenterandの厄介な動作を利用できるようです。dragleave

var counter = 0;
$(document).on('dragenter', function () { 
  if (counter++ === 0) {
    console.log('entered the page');
  }
});

$(document).on('dragleave', function () {
  if (--counter === 0) {
    console.log('left the page');
  }
});

エスケープを押してドラッグをキャンセルしても機能するようです。

http://jsbin.com/atodem/2/

于 2013-01-18T15:39:35.577 に答える
7

では、 と の両方をdocument聴きたいと思います。ゾーンをそれぞれ非表示および表示します。dragleavedragover

于 2012-08-02T04:34:41.517 に答える
0

drop が dragend の前に呼び出されたかどうかを確認することで確認できます。

     var dragConfirmed;

     document.addEventListener("drop", function( event ) {
          // prevent default action (open as link for some elements)
          event.preventDefault();

          dragConfirmed = true;
      }, false);



      document.addEventListener("dragend", function( event ) {

        if (dragConfirmed != true)
        {
             // Escape has been pressed
        }

      }, false);
于 2014-01-17T14:50:54.870 に答える
0

ドラッグリーブは私にはうまくいきませんでした。私はタイムアウトを使用しました：

function stopDrag(){
   console.log('bye drag!');
}

var timeoutHandle;
document.addEventListener('dragover', function(){
    console.log('you are dragging');
    window.clearTimeout(timeoutHandle);
    timeoutHandle = window.setTimeout(stopDrag, 200);
}, false);
于 2015-01-08T18:27:27.730 に答える