Implementation Guide

Step 1: Preparing Draggable Items

Place your items inside the GhostDrag_Source block. For an element to be recognized:

1. Assign the CSS class draggable-item to the widget (Container, Card, or ListItem).
2. Add Attributes to pass data (e.g., data-item-id = User.Id, data-item-type = "Admin").

Step 2: Configuring the Landing Zone

Place the GhostDrag_Target inside a Container. This container defines the maximum width the target will take when expanded.

1. Placeholder: Add the List or Widgets that should be rendered once data is received.
2. Event Handling:Use the OnItemDropped event.
   • Use JSON Deserialize to convert the DataJson string into your OutSystems Structure.
   • Use ListAppend to update your local list variable.

Step 3: Move vs. Copy Logic

• Copy: Set IsMoveMode to False. The item remains in the source list.
• Move: Set IsMoveMode to True. The source item is visually hidden immediately upon drop. Note: Ensure you perform a server-side delete/update logic if the move needs to persist in the database.

Technical Specifications

Data Transfer (The Payload)

The system normalizes data keys. If your source has data-item-product-name, the target receives:

JSON

{

  "productName": "Sample Value"

}

The component automatically handles the conversion from HTML kebab-case to OutSystems-friendly camelCase.

CSS State Hooks

You can customize the look and feel by overriding these global classes in your theme:

• body.ghost-is-dragging: Apply blurs or overlays to the background while dragging.
• .ghost-drop-target: The base style of the drop zone.
• .zone-active: The style when the ghost is hovering directly over a target.
• .drop-success: The "flash" animation class applied after a drop.

Best Practices

• Performance: Keep the draggable-item lightweight. Avoid putting complex heavy patterns inside the ghost clone.
• UX: Use the GhostOpacity parameter (default 0.8) to ensure the user can still see what is behind the item they are moving.
• Responsiveness: Always wrap the Target block in a container with a defined width (e.g., 4 columns or 300px) to prevent the "elastic" expansion from pushing other critical UI elements.