Uppy 拖放目标（Drop Target）

@uppy/drop-target 插件允许用户将文件拖放到页面上的任何元素上，例如整个页面或 document.body。

可以与 Uppy Dashboard 或 Drag & Drop 插件一起使用，或者针对任何 DOM 元素的自定义解决方案。

何时应该使用这个？

当你希望让用户在自己的 UI 中拖放文件，而不是在 Dashboard UI 中，或者捕获从页面任意位置拖放的文件时。

安装

npm
```
npm install @uppy/drop-target
```
yarn
```
yarn add @uppy/drop-target
```

CDN

谨慎

该捆绑包包含了大部分的 Uppy 插件，因此这种方法不建议在生产环境中使用，因为当您可能只使用少数几个插件时，您的用户却需要下载所有插件。
但在加速开发环境方面，这可能会很有帮助，所以不妨在开始时使用它来提速。

<!-- 1. Add CSS to `<head>` -->
<link href="https://releases.transloadit.com/uppy/v3.27.3/uppy.min.css" rel="stylesheet">

<!-- 2. Initialize -->
<div id="uppy"></div>

<script type="module">
    import { DropTarget } from "https://releases.transloadit.com/uppy/v3.27.3/uppy.min.mjs"
    const DropTarget = new Uppy().use(DropTarget)
</script>

使用

此模块有一个默认导出：DropTarget 插件类。

import Uppy from "@uppy/core";
import DropTarget from "@uppy/drop-target";

import "@uppy/core/dist/style.css";
import "@uppy/drop-target/dist/style.css";

const uppy = new Uppy();
uppy.use(DropTarget, {
  target: document.body,
});

API

选项

`onDragLeave`

用于监听 dragleave 事件的事件监听器。

uppy.use(DropTarget, {
  target: document.body,
  onDragLeave: (event) => {
    event.stopPropagation();
  },
});

`onDragOver`

用于监听 dragover 事件的事件监听器。

`onDrop`

用于监听 drop 事件的事件监听器。

`target`

放置拖放区域的 DOM 元素、CSS 选择器或插件（ string、Element、Function 或 UIPlugin，默认：null ）。

Uppy 拖放目标（Drop Target）

何时应该使用这个？

安装

使用

API

选项

onDragLeave

onDragOver

onDrop

target

在本文档中

`onDragLeave`

`onDragOver`

`onDrop`

`target`