Question

这是我想要的行为：

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

我遇到的问题是＃3 在dragenter上使用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

嗯，dragstart和dragend事件似乎只是在将从浏览器拖到浏览器时触发，这几乎没用在你的情况下。我似乎无法阻止闪烁，但如果您为dragenter和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 4

您可以通过检查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);

Answer 5

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

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

5 个答案: