Question

使用 dragenter 事件我在网页上显示一个dropzone，以便快速上传文件，这一切都运行良好。但是，拖动所选文本时，也会弹出dropzone。如何在早期分辨出差异？

我知道drop事件使用dataTransfer.files公开要迭代的所有文件内容，但为时已晚。我需要它在dragenter，只是我看到文件数组一直是空的。
我需要完全控制外观＆amp;我觉得我不是在寻找现有的lib。
在拖动文字与文件时，我可以看到 event.dataTransfer.Clipboard.effectAllowed 的不同值，但每个浏览器的值也不同（Chrome与FF）。
MooTools已经到位，如果有帮助的话。

Answer 1

好的，我已经取得了足够的进展，可以在Chrome和Firefox（3.6+）中实现差异化。这可能不是万无一失的，但万一有人会发现它有用，这就是代码：

  var isFileTransfer = false;
  if (evt.dataTransfer.types) {
    for (var i=0; i<evt.dataTransfer.types.length; i++) {
      if (evt.dataTransfer.types[i] == "Files") {
        isFileTransfer = true;
        break;
      }
    }
  }

Answer 2

我写了一个小函数来检测文件拖动。

function isFileTransfer(evt){
    return [].some.call(evt.dataTransfer.types,function(t){return t=="Files";});
}

Answer 3

我需要确定文件是否从外部拖入浏览器，而不是从浏览器窗口中拖动图像。我是通过在文档对象上侦听 dragstart 来完成的。当文件从外部拖入浏览器时， dragstart 不会触发。因此，如果它确实触发，则表示同一页面中的某些内容被拖动。

document.addEventListener('dragstart', function() {
    samePageDrag = true;
}, false);

document.addEventListener('dragend', function() {
    if (samePageDrag) {
        samePageDrag = false;
    }
}, false);

使用此功能，您可以在 dragenter 或 dragover 事件后检查samePageDrag的值，以确定被拖动的内容是否来自浏览器外部。

如何在javascript dragenter事件期间判断拖动的内容是文本还是文件

3 个答案: