当您将文件从桌面拖动到浏览器时触发的 Javascript 事件是什么答案

【问题标题】：What is the Javascript event that triggers when you drag a file from your desktop to your browser当您将文件从桌面拖动到浏览器时触发的 Javascript 事件是什么
【发布时间】：2012-01-30 16:27:32
【问题描述】：

我正在尝试实现类似于 gmail 的文件上传系统。我已经完成了所有的 Fileupload / AJAX 问题，而且效果很好。我唯一的问题是用户反馈。

例如..在 gmail 中，当您将文件拖到浏览器（假设 IE9+ 用户）时，会弹出一个区域，让您将文件放入其中。我认为这是捕获的某种 JavaScript 事件通过一个框架（比如说 Jquery），它允许我在放置区域制作一些很酷的动画。

我的问题很简单。我应该捕获什么事件来做到这一点？有任何想法吗？我做错了吗？

【问题讨论】：

标签： jquery file-upload drag-and-drop gmail

【解决方案1】：

主要事件只是drop。

您还需要处理dragenter 和dragleave，否则删除操作只会导致加载删除的文件。你也可以选择观看dragover。

我有一些注册这些处理程序的代码，如下所示：

var $dz = $('#dropzone');
$dz.on({
    dragenter: dragenter,
    dragleave: dragleave,
    dragover: false,
    drop: drop
});

function dragenter() {
    $dz.addClass('active');
};

function dragleave() {
    $dz.removeClass('active');
};

function drop(e) {
    var dt = e.originalEvent.dataTransfer;
    if (dt) {
        var files = dt.files;
        ...
    }
    $dz.removeClass('active');
};

在这种情况下，dragenter 和 dragleave 处理程序只是为了在将内容拖入拖放区时更改其外观。

【讨论】：

酷！我希望我的老板想要这个功能。
嗯，这实际上有点工作，但只有当我将拖动的项目传递到放置区时..我仍然不知道放置区在哪里..所以我想..好吧。而不是 $(element).on.... 不适使用 $("body").on... 它触发得很好，但是当我进入任何其他 div 时（假设我的页面以固定宽度居中，所以两边都有一些空白空间，我们可能会说“是纯正文标签”），然后它会触发离开处理程序......我会弄清楚如何在整个页面上维护“进入”，并且只会触发当它实际上完全离开浏览器区域时“离开”。感谢您的帮助
此外，它有点 sux.. 似乎事件“dragenter”会在鼠标移动的每个像素上触发。！所以可以说我在 dropzone 上播放了一个不错的“摇晃”效果 2 秒.. 嗯.. 它实际上感觉就像它被冻结了，因为只要我继续移动鼠标它就不会停止摇晃。！

【解决方案2】：

它被称为drop，您需要的事件对象的属性将在 originalEvent 属性中。

$(element).on("drop",function(e){
  console.log(e.originalEvent)
});

如果我没记错的话，您还需要在同一个元素上取消绑定 dragenter 和 dragleave 以触发 drop 事件。

$(element).on("dragenter dragleave", false);

【讨论】：

关于 dragenter 和 dragleave 的注意事项 - 我的代码中有它们，但忘记了它们实际上是必需的。
@Alnitak - 是的，当我第一次尝试实现此功能时，这让我陷入了困境。我最终放弃了整个想法并使用 jquery 的拖放操作，因为我正在使用文本区域并且绑定到这些事件与 textarea 的正常使用相混淆。