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.
Component Classes and Customization
.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. |
Return to the documentation of the Drag and Drop component.