Skip to main content

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout

 

 

Template:OutSystems/OSLanguageSwitcher

 

 

 

OutSystems

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.

  • Was this article helpful?