import Droppable from '@shopify/draggable/src/Droppable/Droppable.js'

public class | source

Droppable

Extends:

* → Droppable

Droppable is built on top of Draggable and allows dropping draggable elements into dropzone element

Constructor Summary

Public Constructor
public	constructor(containers: HTMLElement[] \| NodeList \| HTMLElement, options: Object) Droppable constructor.

Member Summary

Public Members
public	dropzones: HTMLElement[] All dropzone elements on drag start
public	initialDropzone: HTMLElement Initial dropzone element that the source was drag from
public	lastDropzone: HTMLElement Last dropzone element that the source was dropped into

Method Summary

Public Methods
public	destroy() Destroys Droppable instance.

Private Methods
private	[closestDropzone](target: HTMLElement): HTMLElement \| null Returns closest dropzone element for even target
private	[dropInDropzone](event: DragMoveEvent, dropzone: HTMLElement): boolean Drops a draggable element into a dropzone element
private	[getDropzones](): NodeList \| HTMLElement[] \| Array Returns all current dropzone elements for this draggable instance
private	[onDragMove](event: DragMoveEvent) Drag move handler
private	[onDragStart](event: DragStartEvent) Drag start handler
private	[onDragStop](event: DragStopEvent) Drag stop handler
private	[returnToOriginalDropzone](event: DragMoveEvent) Moves the previously dropped element back into its original dropzone

Public Constructors

public constructor(containers: HTMLElement[] | NodeList | HTMLElement, options: Object) source

Droppable constructor.

Params:

Name	Type	Attribute	Description
containers	HTMLElement[] \| NodeList \| HTMLElement		Droppable containers
options	Object		Options for Droppable

Public Members

public dropzones: HTMLElement[] source

All dropzone elements on drag start

Properties:

Name	Type	Attribute	Description
dropzones	*

public initialDropzone: HTMLElement source

Initial dropzone element that the source was drag from

Properties:

Name	Type	Attribute	Description
initialDropzone	*

public lastDropzone: HTMLElement source

Last dropzone element that the source was dropped into

Properties:

Name	Type	Attribute	Description
lastDropzone	*

Public Methods

public destroy() source

Destroys Droppable instance.

Private Methods

private [closestDropzone](target: HTMLElement): HTMLElement | null source

Returns closest dropzone element for even target

Params:

Name	Type	Attribute	Description
target	HTMLElement		Event target

Return:

HTMLElement | null

private [dropInDropzone](event: DragMoveEvent, dropzone: HTMLElement): boolean source

Drops a draggable element into a dropzone element

Params:

Name	Type	Attribute	Description
event	DragMoveEvent		Drag move event
dropzone	HTMLElement		Dropzone element to drop draggable into

Return:

boolean

private [getDropzones](): NodeList | HTMLElement[] | Array source

Returns all current dropzone elements for this draggable instance

Return:

NodeList | HTMLElement[] | Array

private [onDragMove](event: DragMoveEvent) source

Drag move handler

Params:

Name	Type	Attribute	Description
event	DragMoveEvent		Drag move event

private [onDragStart](event: DragStartEvent) source

Drag start handler

Params:

Name	Type	Attribute	Description
event	DragStartEvent		Drag start event

private [onDragStop](event: DragStopEvent) source

Drag stop handler

Params:

Name	Type	Attribute	Description
event	DragStopEvent		Drag stop event

private [returnToOriginalDropzone](event: DragMoveEvent) source

Moves the previously dropped element back into its original dropzone

Params:

Name	Type	Attribute	Description
event	DragMoveEvent		Drag move event