在上传文件时检测已取消的拖放操作

Question

这是我想要的行为:

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

我遇到的问题是#3。
在文档上使用拖动时，拖放区域显示正常，但我无法让它们再次消失。

我尝试过绑定＜code＞dragend

哪个事件是正确的听？

Answer 1

好吧，< code>dragstart和< code>dragend事件似乎只有在从浏览器拖动东西到浏览器时才会触发，这在您的情况下几乎没有用。我似乎无法停止闪烁，但是如果您给< code>dragenter和< code>dragleave事件添加一个超时，您可以最小化闪烁:

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 2

在＜code＞文档和＜code＞dragover，以分别隐藏和显示区域。

Answer 3

我还没有完全测试它，但似乎您可以利用dragenter和dragoff在每个元素上触发的恼人行为。

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/