Droppable
Mixin

internal

Mix this into another class to enable drop support and receive drops from draggables.

There are 4 basic methods that a droppable implements. These methods are called as drag operations occur:

 class MyDroppable extends Base.mixin(Droppable) {
     dragEnter(drag) {
         // a drag has entered the drop zone... create some type of drop indicator perhaps
     }

     dragMove(drag) {
         // a drag has changed position... update drop indicators
     }

     dragDrop(drag) {
         // drop has occurred... process data from the drag context
     }

     dragLeave(drag) {
         // the drag has left the drop zone... cleanup indicators
     }
 }

Instances of Droppable are associated with an element to receive drag operations:

 let target = new MyDroppable({
     dropRootElement : someElement
 });

No results

Configs

Configs are options you supply in a configuration object when creating an instance of this class

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.
droppableSelector : String

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

Properties

Properties are getters/setters or publicly accessible variables on this class

isDroppable : Booleantrue

READONLY

static

ADVANCED

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

dropEventer : Events

internal

READONLY

Return the Events instance from which drop events are fired.
droppableCls : String

READONLY

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

READONLY

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.
isDroppable : Booleantrue

READONLY

ADVANCED

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

Functions

Functions are methods available for calling on the class

dragDrop( drag )

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.
dragEnter( drag )
: Boolean

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.
dragLeave( drag )

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 Escape 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.
dragMove( drag )

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.

Events

Events are triggered for certain actions in this class and can be listened for to react to those actions in your code

dragEnter

This event is fired when a drag enters this droppable's dropRootElement. It is fired by the droppable's dragEnter method.
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.
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.
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 Escape key or if the abort method is called.

Event handlers

Event handlers are callbacks called as a result of certain actions in this class

onDragEnter

This event is called when a drag enters this droppable's dropRootElement. It is called by the droppable's dragEnter method.
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.
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.
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 Escape key or if the abort method is called.

Source path

Core/mixin/Droppable.js

Inheritance tree1

Droppable

Droppable Mixin internal