# @dragndrop/dropzone

> Dropzone component

Latest version **0.1.6** (published 2019-12-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install @dragndrop/dropzone
pnpm add @dragndrop/dropzone
yarn add @dragndrop/dropzone
bun add @dragndrop/dropzone
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.6 |
| Published | 2019-12-16 |
| First published | 2019-09-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 310.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Maintainers | lrembacz |
| Keywords | dragndrop, drag and drop, dropzone |

## Links

- npm: https://www.npmjs.com/package/@dragndrop/dropzone
- Repository: https://github.com/lrembacz/dragndrop
- Homepage: https://github.com/lrembacz/dragndrop#readme
- Issues: https://github.com/lrembacz/dragndrop/issues
- npm.io page: https://npm.io/package/@dragndrop/dropzone

## Dependencies (4)

- [tslib](https://npm.io/package/tslib.md) ^1.9.3
- [@material/dom](https://npm.io/package/@material/dom.md) ^3.1.0
- [@material/base](https://npm.io/package/@material/base.md) ^3.1.0
- [@dragndrop/draggable](https://npm.io/package/@dragndrop/draggable.md) ^0.1.6

## Recent versions

- 0.1.6 (latest) — 2019-12-16
- 0.1.5 — 2019-12-10
- 0.1.4 — 2019-11-27
- 0.1.2 — 2019-11-07
- 0.1.0 — 2019-10-04
- 0.0.2 — 2019-09-20
- 0.0.1 — 2019-09-20

## README

# Dropzone

Dropzone is element which `Draggable` element can be dropped on.

## Design & API Documentation

- [Demos](https://dragndrop.lukaszrembacz.pl/examples/)

## Installation

```
npm install @dragndrop/dropzone
```

## Usage

Dropzone element can be used in common with Draggable element to create variety of drag and drop powered components for websites.

### CSS Classes (they can be changed)

CSS Class | Description
--- | ---
`dragging--over` | Sets this class to element when draggable element is draggedOver the dropzone
`dragging--invalid` | Sets this class to element when draggable element is not accepted by dropzone

### `Dropzone`

The `Dropzone` is a component which accept `Draggables` and allow them to be dropped. 

```javascript
const dropzoneElement = document.querySelector('.dropzone');
const dropzone = new Dropzone(dropzoneElement);
```

You can also use `attachTo()` as an alias;

```javascript
Dropzone.attachTo(document.querySelector('.dropzone'));
```

Events | Type | Data | Description
--- | --- | --- | ---
`onDragEnter` | CustomEvent | {originalEvent, dragInfo, dropzoneElement} | Event dispatched when `Draggable` enters on `Dropzone`
`onDragLeave` | CustomEvent | {originalEvent, dragInfo, dropzoneElement} | Event dispatched when `Draggable` leaves on `Dropzone`
`onDragOver` | CustomEvent | {originalEvent, dragInfo, dropzoneElement} | Event dispatched when `Draggable` is over on `Dropzone`
`onDrop` | CustomEvent | {originalEvent, dragInfo, dropzoneElement} | Event dispatched when `Draggable` is dropped on `Dropzone`

Property | Value Type | Description
--- | --- | ---
`acceptor` | Acceptor | Data which is attached to draggable
`exact` | boolean | Events from Draggable are stopped with stopPropagation() when exact is true.
`overClass` | String | Class which is set on element when draggingOver (`dragging--over` default)
`invalidClass` | String | Class which is set on element when draggingOver not accepted element (`dragging--invalid` default)
`allowOnChild` | boolean | It allows to drop, if draggable is a child of dropzone, without dragging outside.

Method Signature | Description
--- | ---
`destroy() => void` | Proxies to the foundation's `destroy` method

### `DropzoneFoundation`

Method Signature | Description
--- | ---
| `destroy() => void` | Destroy all event listeners and clean up component. |

### `Acceptor`

Acceptor allows to provide instructions to dropzone which elements should be accepted and which should not.

When Element is not accepted it can`t be dropped on Dropzone.

```javascript
abstract accepts<D>(dragInfo: DragInfo<D>, dropzoneElement: Element, event: Event): boolean;
```

Acceptor is abstract class with accepts method which should be implemented.

Argument | Type | Description
--- | --- | ---
`dragInfo` | DragInfo<D> | Info from `Draggable` which is snapped when dragging
`dropzoneElement` | Element | Dropzone element on which element is dragged
`event` | CustomEvent | Custom Event dispatched `_customDragEnter`, `_customDragLeave`, `_customDragOver` and `_customDrop`

Default there is only `DraggablesAcceptor` implemented which is accepting given `Draggables`.

If you need you can write your own `Acceptor` for example QuerySelectorAcceptor to accept elements with given querySelectors.

---
_Source: https://npm.io/package/@dragndrop/dropzone · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._