Home Reference Source
public class | source

Droppable

Extends:

* → Droppable

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

Constructor Summary

Public Constructor
public

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

Droppable constructor.

Member Summary

Public Members
public

droppables: HTMLElement[]

All droppable elements on drag start

public

initialDroppable: HTMLElement

Initial droppable element that the source was drag from

public

lastDroppable: HTMLElement

Last droppable element that the source was dropped into

public

options: {...defaults: Object, ...undefined: Object}

Method Summary

Public Methods
public

Destroys Droppable instance.

public

Returns class name for class identifier

Private Methods
private

[closestDroppable](target: HTMLElement): HTMLElement | null

Returns closest droppable element for even target

private

[drop](event: DragMoveEvent, droppable: HTMLElement): boolean

Drop method drops a draggable element into a droppable element

private

[getDroppables](): NodeList | HTMLElement[] | Array

Returns all current droppable elements for this draggable instance

private

Drag move handler

private

Drag start handler

private

Drag stop handler

private

Release method moves the previously dropped element back into its original position

Public Constructors

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

Droppable constructor.

Params:

NameTypeAttributeDescription
containers HTMLElement[] | NodeList | HTMLElement

Droppable containers

options Object

Options for Droppable

Public Members

public droppables: HTMLElement[] source

All droppable elements on drag start

Properties:

NameTypeAttributeDescription
droppables *

public initialDroppable: HTMLElement source

Initial droppable element that the source was drag from

Properties:

NameTypeAttributeDescription
initialDroppable *

public lastDroppable: HTMLElement source

Last droppable element that the source was dropped into

Properties:

NameTypeAttributeDescription
lastDroppable *

public options: {...defaults: Object, ...undefined: Object} source

Public Methods

public destroy() source

Destroys Droppable instance.

public getClassNameFor(name: String): String | null source

Returns class name for class identifier

Params:

NameTypeAttributeDescription
name String

Name of class identifier

Return:

String | null

Private Methods

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

Returns closest droppable element for even target

Params:

NameTypeAttributeDescription
target HTMLElement

Event target

Return:

HTMLElement | null

private [drop](event: DragMoveEvent, droppable: HTMLElement): boolean source

Drop method drops a draggable element into a droppable element

Params:

NameTypeAttributeDescription
event DragMoveEvent

Drag move event

droppable HTMLElement

Droppable element to drop draggable into

Return:

boolean

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

Returns all current droppable elements for this draggable instance

Return:

NodeList | HTMLElement[] | Array

private [onDragMove](event: DragMoveEvent) source

Drag move handler

Params:

NameTypeAttributeDescription
event DragMoveEvent

Drag move event

private [onDragStart](event: DragStartEvent) source

Drag start handler

Params:

NameTypeAttributeDescription
event DragStartEvent

Drag start event

private [onDragStop](event: DragStopEvent) source

Drag stop handler

Params:

NameTypeAttributeDescription
event DragStopEvent

Drag stop event

private [release](event: DragMoveEvent) source

Release method moves the previously dropped element back into its original position

Params:

NameTypeAttributeDescription
event DragMoveEvent

Drag move event