javascript - 上传文件时检测到取消的拖放操作

Question

这是我想要的行为：

1. 用户开始从文件资源管理器中拖动文件
2. 当文件悬停在浏览器窗口上时，会出现 3 个拖放区
3. 当用户取消拖放或放置文件时，放置区消失。

我遇到的问题是#3。
使用dragenteron时，拖放区看起来很好，document但我无法让它们再次消失。

我已经尝试过dragend从不触发的绑定，dragleave每次拖动离开后代时都会触发，因此拖动区域会闪烁。

哪个事件将是正确的听？

Answer 1

我还没有完全测试它，但似乎你可以利用每个元素的烦人行为dragenter和触发。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');
  }
});

如果通过按 Escape 取消拖动，似乎也可以工作。

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

Answer 2

在 上document，您想同时收听dragleave和dragover，分别隐藏和显示区域。

Answer 3

好吧，dragstartanddragend事件似乎仅在将某些内容从浏览器拖动到浏览器时才会触发，这在您的情况下几乎没有用。我似乎无法停止闪烁，但是如果您为dragenteranddragleave事件添加超时，您可以最小化闪烁：

window.onload=function(){
    var drag = new (function(){
        var timeout;
        this.detected = function(){
            return !(timeout === undefined)
        }
        this.start = function(){
            clearTimeout(timeout);
        }
        function endDrag(){
            for (var i=0;i<3;i++) //no longer dragging, remove drop zones
                document.getElementsByClassName("dropZone")[i].style.display="none";
        }
        this.end = function(){
            timeout = setTimeout((function(){timeout=undefined;endDrag();}),1500)
        }
    })()
    document.body.ondragenter = function(){
        drag.start();
        for (var i=0;i<3;i++) //drag started, show drop zones
            document.getElementsByClassName("dropZone")[i].style.display="block";
    }
    document.body.ondragleave = function(event){
        event = event||window.event
        if ((event.source||event.target)==document.body)
            drag.end();
    }
}

希望这会有所帮助，如果它不完美，请见谅。:-(

Answer 4

dragleave 对我不起作用。我使用了超时：

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);

Answer 5

您可以通过检查是否在 dragend 之前调用了 drop 来验证它。

     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);