@dragndrop/dropzone NPM

Dropzone

Dropzone is element which Draggable element can be dropped on.

npm install @dragndrop/dropzone

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

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

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

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

You can also use attachTo() as an alias;

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

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

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.

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	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`