Kanban

Kanban Stimulus Controller

Implements drag-and-drop functionality for Kanban board interfaces with server synchronization and position tracking. Provides comprehensive card movement, visual feedback, and AJAX-based persistence.

Features:

  • Drag-and-drop card movement between columns
  • Visual feedback during drag operations
  • Position restoration on invalid drops
  • Server synchronization via AJAX
  • CSRF protection for security
  • Validation callbacks before drop
  • Automatic position calculation

Values:

  • csrfToken: String - CSRF token for secure requests
  • url: String - API endpoint for position updates

Targets:

  • card: Individual card elements that can be dragged
  • column: Column containers for card organization

Usage:

Card Content

Methods

cardDrag(event)

Handle card drag operation Processes drag movement without dropping

Parameters:
NameTypeDescription
eventDragEvent

Drag event from card element

connect()

Connect controller to DOM Sets up global drag and drop event listeners

disconnect()

Disconnect controller from DOM Cleans up global event listeners

dropCard(event)

Handle card drop operation Processes final drop with server synchronization

Parameters:
NameTypeDescription
eventDragEvent

Drop event from target element

grabCard(event)

Handle card grab (drag start) Sets up drag operation and records original position

Parameters:
NameTypeDescription
eventDragEvent

Dragstart event from card element

handleDragOver(event)

Handle global drag over events Prevents default behavior to enable drop

Parameters:
NameTypeDescription
eventDragEvent

Global dragover event

handleDrop(event)

Handle global drop events Restores original position if dropped outside valid area

Parameters:
NameTypeDescription
eventDragEvent

Global drop event

initialize()

Initialize controller state Sets up drag tracking variables

processDrag(event, isDrop)

Process drag operation with position calculation and server sync Handles both preview and final drop operations

Parameters:
NameTypeDescription
eventDragEvent

Drag or drop event

isDropBoolean

Whether this is final drop operation

registerBeforeDrop(callback)

Register callback function to validate drops before processing Allows custom validation logic for card movements

Parameters:
NameTypeDescription
callbackfunction

Validation function returning boolean

restoreOriginalPosition()

Restore card to its original position Used when drop is invalid or cancelled