Question

在Gmail中，在撰写电子邮件时，如果您将文件拖到撰写区域（编辑器）以附加文件，则撰写区域将变为拖放区域以上传文件。

我想知道如何做以下事情：当用户在元素上拖动文件时，如何将HTML元素转换为拖放文件上传区域？没有必要将元素转换为拖放文件上传区域。但是可以有另一个html元素，它作为拖放文件上传区域，当用户将文件拖到第一个元素上时，它需要出现在第一个元素的顶部。所以，我需要知道如何知道用户何时拖动文件并将其移动到任何html元素上。这就像带有拖动文件的鼠标悬停事件。这是什么事件？

Answer 1

有一个jQuery插件，允许你拖动和放大删除要上传的文件...查找jQuery File Upload Demo

要做你想做的事，你必须添加mouseIn事件处理，并且在这种情况下，执行此操作：

function draggingIn(e) {

   var count =  e.dataTransfer.files.length; (like Chamika Sandamal function)

   if (count > 0) {
        //A file is dragged
        $('droppable').addClass('showBox');
   }
}

对于最近的浏览器，您可以使用HTML5可拖动功能see here

它看起来像这样：fiddle我做了一些测试，只是寻找拖动事件

Answer 2

你自己尝试过一些东西，也许是谷歌吗？ sample at html5demos.com

Answer 3

引用此网站，因为Gmail拖放是在此概念中完成的。

https://developer.mozilla.org/en-US/docs/Web/Events/drag

https://developer.mozilla.org/en-US/docs/Web/Events/drop

如果您有任何疑问，可以在下面发帖

如何创建拖放区域来上传Gmail等文件？

3 个答案: