Port @uppy/drop-target docs

docs/user-interfaces/elements/drop-target.mdx

@@ -1 +1,104 @@
+---
+sidebar_position: 2
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+import UppyCdnExample from '/src/components/UppyCdnExample';
+
 # Drop target
+
+The `@uppy/drop-target` plugin lets your users drag-and-drop files on any
+element on the page, for example the whole page, `document.body`.
+
+Can be used together with Uppy Dashboard or Drag & Drop plugins, or your custom
+solution, including plain text “please drop files here”.
+
+:::tip
+
+[Try out the live example](/examples) or take it for a spin in
+[CodeSandbox](https://codesandbox.io/s/uppy-drag-drop-gyewzx?file=/src/index.js).
+
+:::
+
+## When should I use this?
+
+When you want to allow users to drag and drop files in your own UI, rather than
+in the [`Dashboard`](../dashboard) UI.
+
+## Install
+
+This plugin is published as the `@uppy/drop-target` package on the npm registry.
+
+<Tabs>
+  <TabItem value="npm" label="NPM" default>
+
+```shell
+npm install @uppy/drop-target
+```
+
+  </TabItem>
+
+  <TabItem value="yarn" label="Yarn">
+
+```shell
+yarn add @uppy/drop-target
+```
+
+  </TabItem>
+
+  <TabItem value="cdn" label="CDN">
+    <UppyCdnExample>
+      {`
+        import { DropTarget } from "{{UPPY_JS_URL}}"
+        const DropTarget = new Uppy().use(DropTarget)
+      `}
+    </UppyCdnExample>
+  </TabItem>
+</Tabs>
+
+## Use
+
+This module has one default export: the `DropTarget` plugin class.
+
+```js {8-10} showLineNumbers
+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
+
+### Options
+
+#### `onDragLeave(event)`
+
+Event listener for the [`dragleave` event][].
+
+#### `onDragOver(event)`
+
+Event listener for the [`dragover` event][].
+
+#### `onDrop(event)`
+
+Event listener for the [`drop` event][].
+
+#### `target`
+
+DOM element, CSS selector, or plugin to place the drag and drop area into
+(`string`, `Element`, `Function`, or `UIPlugin`, default: `null`).
+
+[`dragover` event]:
+	https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dragover_event
+[`dragleave` event]:
+	https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dragleave_event
+[`drop` event]:
+	https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/drop_event