html - 整页拖放文件网站

Question

我正在尝试获得与 dropbox 类似的拖放功能。我想尽可能使用基本的网络组件/编码来实现这一点。 HTML 或 HTML5 最好。这是为了原型(prototype)，所以越快越好。这是我想要实现的目标:

1) 用户应该能够将文件从他们的计算机拖放到网页上的任何位置。2) 当项目被拖动到网页上时，网页本身应该显示一些指示符(即:突出显示或颜色叠加)。

我看过几个示例的代码片段，但它们都仅限于将已经在屏幕上的容器放到其他容器中，而不是将那么多文件放到网页中。

拖放的文件不需要上传到任何地方，因为这将是一个演示。

任何人都有一些代码片段可以让我继续。

Answer 1

基本思路是这样的:

• 默认隐藏拖放区。
• 将处理程序附加到 html 元素，该元素将在页面上拖动某些内容时显示区域。
• 当区域可见时，点击它的事件来处理拖放。
• 当鼠标离开区域时，将其隐藏。

这是对我有用的代码:https://jsfiddle.net/oL2akhtz/ .

---

这部分 HTML5 规范有点奇怪。要记住的最重要的事情是:

• 有四个有趣的事件: dragenter 在我们拖动某物并进入元素边界时触发； dragover 当我们在元素上拖动东西时每隔几毫秒触发一次； dragleave 与dragenter 相反； drop 在实际放下东西时触发。
• 您必须在作为有效放置目标的任何元素上同时收听dragenter 和dragover。即，通过监听这些事件并取消它们的默认操作，将元素变成有效的放置目标。在我们的例子中，这适用于拖放区覆盖。

现在我将尝试解释我的代码。

1. 首先，我们添加一个监听器来处理整个页面的 dragenter。它仅显示叠加层(无需阻止默认操作，因为我们实际上并不打算在页面上放置任何内容，我们只会在叠加层上放置)。
2. 为叠加层设置 dragenter 和 dragover 的处理程序。它们会阻止默认操作(不允许放在那里)并设置 dropEffect 来给用户一些不错的反馈(尽管这在现代浏览器中似乎什么都不做)。这是测试被拖动的项目是否有效的好地方。
3. 如果鼠标离开拖放区(这与整个窗口相同，因为 div 覆盖了所有内容)我们将其隐藏。
4. 设置实际的放置处理程序。

就是这样，非常简单。这是当有人删除文件时发生的情况:

html 元素的
1. dragenter 触发。它显示了拖放区。
2. 由于鼠标现在位于放置区上方，html 元素的 dragleave 会触发，但我们忽略它。
3. dragenter 为 dropzone 开火，然后 dragover 继续开火。我们只是用吉普车说，是的，这是一个有效的下降目标。
4. drop 触发，在这种情况下我们隐藏 dropzone 并处理文件，或者 dragleave 触发 dropzone 触发，在这种情况下我们只是隐藏它。