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

Question

这是我想要的行为:

1. 用户开始从文件资源管理器中拖动文件
2. 当文件悬停在浏览器窗口上时,会出现3个删除区域
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隐藏和显示区域.