Droppable

Configs

A selector, which, if specified, narrows the dropability to child elements of the dropRootElement which match this selector.

dropRootElement: HTMLElement

Set this config to the element where drops should be received. When set, the b-droppable CSS class is added to the element and the Droppable instance is associated with that element so that it can be found by draggables.

Properties

Class hierarchy

isDroppable: Boolean= truereadonly

Identifies an object as an instance of Droppable class, or subclass thereof.

isDroppable: Boolean= truereadonlystatic

Identifies an object as an instance of Droppable class, or subclass thereof.

Other

droppableCls: Stringreadonly

Returns the CSS class that is added to the dropRootElement, i.e., 'b-droppable'.

dropping: DragContextreadonly

The current DragContext. This is set when a drag enters this target. Changing this config causes the dragEnter and dragLeave methods to be called. If dragEnter returns false for a drag, this value will be set to null.

Functions

dragDrop

This method is called when the drag that was previously announced via dragEnter has ended with a drop. In addition to any cleanup (since dragLeave will not be called), this method handles any updates associated with the data from the drag context and the position of the drop.

The base class implementation of this method fires the drop event.

Parameter	Type	Description
`drag`	DragContext

dragEnter

This method is called when a drag enters this droppable's dropRootElement. In many cases, this method is used to create some sort of drop indicator to provide user feedback.

If this method does not return false, the dropping config will retain the given drag context which was set prior to this method being called.

If this method returns false, the drop will not be accepted. Neither dragDrop nor dragLeave will be called for this drop. If the drag leaves this target and re-enters, this method will be called again. While dropping will already be updated before this method is called, it will be reset to null in this case.

The base class implementation of this method fires the dragEnter event.

Parameter	Type	Description
`drag`	DragContext

Returns: Boolean

dragLeave

This method is called when the drag that was previously announced via dragEnter leaves this droppable's dropRootElement, or the drag is aborted by the user pressing the ESC key, or the abort method is called.

This is the time to cleanup anything created by dragEnter.

The base class implementation of this method fires the dragLeave event.

Parameter	Type	Description
`drag`	DragContext

dragMove

This method is called when the drag that was previously announced via dragEnter moves to a new position. This is typically where drop indicators are updated to reflect the new position.

The base class implementation of this method fires the dragMove event.

Parameter	Type	Description
`drag`	DragContext

Events

dragEnter

This event is fired when a drag enters this droppable's dropRootElement. It is fired by the droppable's dragEnter method.

// Adding a listener using the "on" method
droppable.on('dragEnter', ({ source, drag, event }) => {

});

Parameter	Type	Description
`source`	Draggable	The draggable instance that fired the event.
`drag`	DragContext	The drag context.
`event`	Event	The browser event.

dragLeave

This event is fired when the drag that was previously announced via dragEnter leaves this droppable's dropRootElement. It is fired by the droppable's dragLeave method.

// Adding a listener using the "on" method
droppable.on('dragLeave', ({ source, drag, event }) => {

});

Parameter	Type	Description
`source`	Draggable	The draggable instance that fired the event.
`drag`	DragContext	The drag context.
`event`	Event	The browser event.

dragMove

This event is fired when the drag that was previously announced via dragEnter moves to a new position. It is fired by the droppable's dragMove method.

// Adding a listener using the "on" method
droppable.on('dragMove', ({ source, drag, event }) => {

});

Parameter	Type	Description
`source`	Draggable	The draggable instance that fired the event.
`drag`	DragContext	The drag context.
`event`	Event	The browser event.

drop

This event is fired when the drag that was previously announced via dragEnter has ended with a drop. It is fired by the droppable's dragDrop method.

This event is not fired when a drag gesture is aborted by the user pressing the ESC key or if the abort method is called.

// Adding a listener using the "on" method
droppable.on('drop', ({ source, drag, event }) => {

});

Parameter	Type	Description
`source`	Draggable	The draggable instance that fired the event.
`drag`	DragContext	The drag context.
`event`	Event	The browser event.

Event handlers

onDragEnter

This event is called when a drag enters this droppable's dropRootElement. It is called by the droppable's dragEnter method.

new Droppable({
    onDragEnter({ source, drag, event }) {

    }
});

Parameter	Type	Description
`source`	Draggable	The draggable instance that fired the event.
`drag`	DragContext	The drag context.
`event`	Event	The browser event.

onDragLeave

This event is called when the drag that was previously announced via dragEnter leaves this droppable's dropRootElement. It is called by the droppable's dragLeave method.

new Droppable({
    onDragLeave({ source, drag, event }) {

    }
});

Parameter	Type	Description
`source`	Draggable	The draggable instance that fired the event.
`drag`	DragContext	The drag context.
`event`	Event	The browser event.

onDragMove

This event is called when the drag that was previously announced via dragEnter moves to a new position. It is called by the droppable's dragMove method.

new Droppable({
    onDragMove({ source, drag, event }) {

    }
});

Parameter	Type	Description
`source`	Draggable	The draggable instance that fired the event.
`drag`	DragContext	The drag context.
`event`	Event	The browser event.

onDrop

This event is called when the drag that was previously announced via dragEnter has ended with a drop. It is called by the droppable's dragDrop method.

This event is not called when a drag gesture is aborted by the user pressing the ESC key or if the abort method is called.

new Droppable({
    onDrop({ source, drag, event }) {

    }
});

Parameter	Type	Description
`source`	Draggable	The draggable instance that fired the event.
`drag`	DragContext	The drag context.
`event`	Event	The browser event.