Dropzone

Allows you to drag around elements on the screen.

Usage #

new dropzone(dropzoneOptions);

Basic implementation #

const square = new dropzone({ element: '.square', dropzones: ['.dropzone'] });

dropzoneOptions #

element #

Type:

type element = string

The element selector.

dropzones #

Type:

type dropzones = string[]

Array of dropzones that the element can be dropped into.

dragClass #

Type:

type dragClass = string

Class to be added to the dragged element.

dropzoneActiveClass #

Type:

type dropzoneActiveClass = string

Class to be added to the dropzone, whenever an element is dragged over it.

dropType #

Type:

type dropType = 'switch' | 'add' | 'shift' | 'none'

default: 'add'

The type of action to take, when you drop an element over a dropzone that already has elements inside.

Example

const square = new dropzone({ element: '.square1', dropzones: ['.dropzone1'], dropType: 'add' });
const square1 = new dropzone({ element: '.square2', dropzones: ['.dropzone2'], dropType: 'none' });
const square2 = new dropzone({ element: '.square3', dropzones: ['.dropzone3'], dropType: 'switch' });
const square3 = new dropzone({ element: '.square4', dropzones: ['.dropzone4'], dropType: 'shift' });

onDragStart #

Type:

type onDragStart = () => {}

Executes when you start dragging the element.

onDragMove #

Type:

type onDragMove = () => {}

Executes when you move the dragged element.

onDragEnd #

Type:

type onDragEnd = () => {}

Executes when you stop dragging the element.

onDropZoneLeave #

Type:

type onDropZoneLeave = () => {}

Executes when you drag an element out of a a dropzone

onDropZoneEnter #

Type:

type onDropZoneEnter = () => {}

Executes when you drag an element over a dropzone

onDrop #

Type:

type onDrop = (dropEventData) => {}

Executes when an element is dropped in a dropzone.

dropEventData #

type dropEventData = {
    preventDefault: () => {} //preventDefault stops the element from being dropped. Useful when you want to have a backend handle the element move
    target: HTMLElement,
    dropzone: HTMLElement,
}

Actions #

You are able to drag elements using actions. Since every dropzone action is unique you can do the following:

const element = new dropzone({ element: '.square', dropzones: ['.dropzone'] });

actions.execute(element.actionName, {x: 100, y: 100, index: 0});

You will need to pass the x and y coordinates where you want the element to go and the index of the element.