1️⃣ Installation

1. Open your ODC application.

2. Go to Forge.

3. Search for Widget Dragger.

4. Click Install and select your application.

5. Publish the app once installation is complete.

✅ Widget Dragger will now be available in your UI Toolbox.

---

2️⃣ Basic Usage (Drag & Drop Widgets)Step 1: Add the Widget Dragger Container

1. Open the screen or block where you want drag-and-drop.

2. From the Widget Dragger section in the toolbox, drag the Widget Dragger Container onto the screen.

3. This container will act as the draggable area.

---

Step 2: Add Widgets Inside the Container

1. Place any widgets inside the Widget Dragger Container, such as:

   • Containers

   • Cards

   • List items

   • Custom widgets

2. Each direct child widget becomes draggable automatically.

📌 Tip: For best results, wrap each draggable item in a Container.

---

Step 3: Enable Drag & Sort

• By default, drag-and-drop sorting is enabled automatically.

• Users can:

  • Click and drag widgets

  • Reorder them within the container

  • See instant visual feedback

---

3️⃣ Configuration OptionsDrag Handle (Optional)

• If you want dragging to start only from a specific area:

  1. Add a CSS class (e.g., drag-handle) to a widget inside each item.

  2. Set the DragHandleClass property to drag-handle.

This prevents accidental dragging when clicking other content.

---

Direction (Vertical / Horizontal)

• Configure the Direction property:

  • Vertical → for lists and columns

  • Horizontal → for rows and carousels

---

Enable / Disable Dragging

• Use the IsEnabled input:

  • True → Dragging allowed

  • False → Dragging disabled (read-only mode)

Useful for role-based or state-based UI control.

---

Sorting Callback (Optional)

• Use the OnDrop or OnSort event:

  • Trigger logic after widgets are reordered

  • Save the new order to the database

  • Update a list or local variable

Example use cases:

• Dashboard customization

• User-defined layouts

• Priority ordering

---

4️⃣ Styling & CustomizationVisual Feedback

• Widget Dragger applies default Dragula styles.

• You can override styles using CSS:

  • Dragging item

  • Placeholder position

  • Hover effects

Example:

• Change opacity while dragging

• Highlight drop zones

---

Responsive Support

• Works with responsive layouts.

• Supports both desktop and touch devices.

---

5️⃣ Common Use Cases

• Sortable dashboards

• Reorderable cards or tiles

• Custom page layouts

• Admin configuration screens

• Drag-and-drop widget editors

---

7️⃣ Compatibility

• Platform: OutSystems Developer Cloud (ODC)

• UI: Reactive Web

• Library: Dragula JS

• Supported browsers: All modern browsers