Drag and Drop Events and Customization

The Drag and Drop component includes events and classes that you can customize.

Events

Draggable Item

OnDrop (Event)

Triggered when a draggable item is dropped inside this droppable area.

		DraggableItemId (Text)	Draggable-Item Identifier passed in Id.
		DropAreaId (Text)	Returns the identifier of an active DropArea.
		TargetObjId (Text)	Returns the Active DropArea DOM Element Id.
		OldPosition (Integer)	Position of the active element in the original list when the drag starts.
		NewPosition (Integer)	Position of the active element in the new list after the element drops.

Drop Area

OnDropReceive (Event)

Triggered when a draggable item is dropped inside this droppable area.

	DraggableItemId (Text)	Returns the Draggable-Item identifier when the drop action occurs.
	DropAreaId (Text)	DropArea Identifier passed in Id.
	OldPosition (Integer)	Position of the active element in the original list when the drag starts.
	NewPosition (Integer)	Position of the active element in the new list after the element drops.

Note: Both OnDrop (DraggableItem) and OnDropReceive (DropArea) are triggered together.

.drag-and-drop.moving-placeholder.active .draggable-item	Used in the draggable item while it is moving. Customize it if you want to highlight the active item.
.drag-and-drop.affordance .drag-and-drop .affordance	Both classes are used to change the style of the affordance.
.drag-and-drop.drop-area.highlight:before	Used to control the opacity of drop-area highlight.
.drag-and-drop.drop-area:before	Used to highlight drop areas where the active draggable item can be dropped.
.drag-and-drop.drop-area.highlight.active:before	Used to control the opacity of the active drop-area highlight.
.drag-and-drop .progress-bar-container .drag-and-drop .progress-bar-container .progress-bar	Used to control the style of the progress bar used in the long press feature.
This class is exclusive for version 1.0.1 and has been discontinued: .drag-and-drop .draggable-item.active	Used in the draggable item while it is moving. Customize it if you want to highlight the active item.