Implementation Guide1. Basic Setup

To enable drag-and-drop functionality, simply add the Shared lists Drag&Drop component to the screen or web block containing your lists.

• Input Parameter: Pass the specific CSS class name used on your list containers (e.g., "task-list") to the component's input parameter.

2. Container Requirements

For a smooth user experience, ensure your list containers have a defined minimum height. This allows users to drag items into a column even when it is currently empty.

• Recommendation: Set min-height to a significant portion of the viewport (e.g., 80vh) to ensure the drop zone remains accessible.

3. Critical State Management (Indexing)

To ensure the component accurately tracks item positions and indexes, follow this architectural pattern:

• Keep UI Lists Static: The lists rendered on the screen should remain static (e.g., directly bound to the initial data fetch results).

• Use Proxy Variables: Create "fake" lists or local variables to keep track of the correct positions during the drag-and-drop process.

• Why? If you manipulate the active data source used for the screen render during a sort, the component will trigger a refresh. This re-render causes SortableJS to lose the current position of the items, breaking the interaction.

4. Recommended Styling

Use the following CSS to provide professional visual feedback, including "ghost" effects for the original position and "chosen" effects for the item being dragged.

:root {
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.05);
  --shadow-drag: 0 16px 40px rgba(0,0,0,0.15), 0 4px 12px rgba(0,0,0,0.1);
  --radius: 10px;
}

/* The lists*/
.task-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 2px;
  border-radius: var(--radius);
  transition: background 0.2s;
  min-height: 80vh;
}

/* The Individual Items */
.task-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 16px 18px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  cursor: grab;
  transition: box-shadow 0.2s, transform 0.15s, border-color 0.2s;
  position: relative;
  overflow: hidden;
}

.task-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
  border-color: #cbd5e1;
}

.task-card:active {
  cursor: grabbing;
}

/* SortableJS Specific Classes */
.task-card.sortable-chosen {
  box-shadow: var(--shadow-drag);
  transform: rotate(1.5deg) scale(1.02);
  border-color: #cbd5e1;
  z-index: 9999;
}

.task-card.sortable-ghost {
  opacity: 0.35;
  transform: none;
  box-shadow: none;
}

Technical Credits

This component is powered by the SortableJS library. For advanced configurations, refer to the Official Documentation.