如何区分在删除文件或文件夹之前是否被拖动？ [英] How to distinguish if a file or folder is being dragged prior to it being dropped?

问题描述

我正在尝试检测文件夹或文件是否在 dragover 或 dragenter中拖动 事件。

I am trying to detect if a folder or a file is dragged in the dragover or dragenter events.

c $ c> ondrop 事件，有一个名为 MouseEvent 的参数，其中有一个名为 dataTransfer ，列出的文件（ .files ）或项目（ .items ），具体取决于浏览器，我可以在 Chrome 和火狐的。但是，对于 dragover 和 dragenter 事件这些字段（ .files 和 .items ）为空。问题是我拖动时不需要该信息。

In the ondrop event, there is an argument called MouseEvent, which has a field named dataTransfer, where are listed files (.files) or items (.items), depending on the browser, and I can read that in both Chrome and Firefox. However, for the dragover and dragenter events those fields (.files and .items) are empty. The problem is that I need that information while dragging, not dropping.

注意：对于这两个文件和文件夹 event.dataTransfer.types [i] ===文件是 true 。

我发现以下答案部分适合我的问题：

I found the following answer to partially fit for my question:

WebKit，因此Chrome，当您可以调用的getData 。您不能在 dragstart 或 dragover 中执行此操作。我认为这是规范的错误。

WebKit, and hence Chrome, is quite restrictive on when you can call getData. You're not allowed to do it inside dragstart or dragover. I think this is the canonical bug.

但是答案是2012年，而我找不到实际的更新信息在主题上，所以我正在寻找更新的信息。

But that answer is from 2012, and I can't find actual updated information on the topic, so I am looking for updated information on this.

推荐答案

^{TL ; DR你不能：（}

^{如果你想知道为什么这个问题还没有被接受的答案您可以阅读OP，和此元问题 =https://meta.stackoverflow.com/a/283712/3889449>我的回答 。}

我做了一些研究在这个主题的许多文档中，我自己在各种浏览器上进行了测试，所以我决定总结一下我所知道的拖放文件。

I made some researches in many documentations for this topic and tested it by myself on various browsers, so I decided to summarize all I know about drag and drop of files here.

当您拖动文件c使用一些听众，例如：

When you drag a file you can use some listeners, such as:

• dragenter


• dragover


• dragend


• dragleave

• dragenter
• dragover
• dragend
• dragleave

鉴于这些是拖动事件，文件属性 event.dataTransfer 将有 length == 0 或为空（ null ）。

Given that these are drag events, the files property of event.dataTransfer will either have length == 0 or be empty (null).

想象一下，您可以在拖动事件中读取文件：即使用户不想要将文件上传到您的网站。这是没有道理的，认真的。想象一下，您将文件从桌面拖动到另一个文件夹，您不小心将其拖动到网页上：现在网页读取您的文件，并将您的个人信息存储在其服务器上... 这将是一个巨大的安全漏洞

Imagine you could read files on a drag event: you would be able to read everything even if the user doesn't want to upload files to your site. It would make no sense, seriously. Imagine you are dragging a file from your desktop to another folder and you accidentally drag it through a web page: now the web page reads your file and stores your personal information on its server... that would be a huge security flaw.

但是，您仍然可以检测用户是否拖动文件（而且文件也是文件夹，因为文件夹是文件）不是通过迭代数组 event.dataTransfer.types 。您可以创建一个函数来检查拖动事件是否包含文件，然后在事件处理程序中调用它。

However, you will still be able to detect whether the user is dragging files (and by files I mean folders too, because folders are files) or not by iterating over the array event.dataTransfer.types. You can create a function that checks if the drag event contains files, and then call it in the event handler.

示例：

function containsFiles(event) {
    if (event.dataTransfer.types) {
        for (var i=0; i<event.dataTransfer.types.length; i++) {
            if (event.dataTransfer.types[i] == "Files") {
                return true;
            }
        }
    }

    return false;
}

function handleDragEnter(e) {
    e.preventDefault();
    if (containsFiles(e)) {
        // The drag event contains files
        // Do something
    } else {
        // The drag event doesn't contain files
        // Do something else
    }
}

删除

当您将文件放入< div> （或您使用的任何元素） dropzone），您将使用一个监听器来执行事件 drop 来读取一些文件属性，如名称，大小，类型和最后修改日期。

Dropping

When you drop a file into the drop <div> (or whatever element you're using as dropzone), you will use a listener for the event drop to read some file properties such as name, size, type and last modification date.

要检测文件是否是文件夹，您将要执行以下操作：

To detect if a file is a folder, you are going to:

1. 检查文件是否为 type ==，因为文件夹没有类型。


2. 检查文件大小是否为4096的倍数： size％4096 == 0 ，因为文件夹总是具有4096字节（这是4KiB）的大小倍数。

1. Check if the file has type == "", because folders have no type.
2. Check if the file size is a multiple of 4096: size%4096 == 0, because folders always have a size multiple of 4096 bytes (which is 4KiB).

示例：

function handleDrop(e) {
    e.stopPropagation();
    e.preventDefault();

    var files = e.dataTransfer.files;

    for (var i = 0, f; f = files[i]; i++) { // iterate in the files dropped
        if (!f.type && f.size%4096 == 0) {
            // The file is a folder
            // Do something
        } else {
            // The file is not a folder
            // Do something else
        }
    }
}

已知问题：由于该文件夹实际上是文件，因此这是区别于另一种文件的唯一方法。虽然这种方法不能绝对确定文件是一个文件夹：它可能是一个没有扩展名的文件，大小为0或完全为N×4096B。

KNOWN ISSUE: Since that folders are actually files, this is the only way to distinguish them from another kind of file. Although this method doesn't give you absolute certainty that a file is a folder: it might be a file without extension and with a size of 0 or exactly N x 4096B.

以下是一些工作示例，可以看到上面所说的内容，并自行测试。在运行它们之前，请确保您的浏览器支持拖放功能。玩得开心：

Here are some working examples to see what I said above in action and test it by yourself. Before running them, make sure that your browser supports drag and drop features. Have fun:

• 文件删除显示信息（由我制作）


• 文件/文件夹识别（由我制作）


• 文件拖动检测（从css-tricks）

• File drop display info (made by me)
• File/folder recognize (made by me)
• File drag detect (from css-tricks)

这篇关于如何区分在删除文件或文件夹之前是否被拖动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！