Draggable Grid Sorting Interface

This is a Draggable Grid Sorting Interface. It allows users to physically rearrange a 3x3 matrix of cards using fluid drag-and-drop mechanics. Its function is to provide an intuitive, visual method for reordering data sets, replacing static input fields with direct spatial manipulation.

Specs

• Weight: ~100 KB (Dependencies: GSAP Core + Draggable Plugin).
• Performance: High. Uses GPU-accelerated transform matrices (x, y) instead of triggering expensive layout reflows (top, left).
• Theming / Customization: Dimensions are hardcoded in JavaScript (rowSize, colSize). Modifying the CSS requires matching JS variable updates.
• Responsiveness: Static. [!] The container has a fixed 750x450px size. It does not scale natively to mobile viewports without significant code refactoring.
• Graceful Degradation: If JavaScript fails, the items collapse into a single stacked position because CSS position: absolute is used without JS coordinate mapping.

Anatomy

• HTML: A minimal .container wrapping a series of .list-item nodes.
• CSS: Stripped down to structural absolute positioning. The visual cards (.item-content) rely on basic box shadows and background colors.
• JS: The logic engine. It registers the GSAP Draggable plugin, maps a 2D grid array into coordinates, tracks pointer events, and recalculates the array index (changeIndex()) dynamically when a card crosses a cell boundary.

Logic

The elegance lies in the coordinate-to-index mapping during the drag sequence.

function dragAction() {
  let col = clampCol(Math.round(this.x / colSize));
  let row = clampRow(Math.round(this.y / rowSize));
  
  // Check if position has changed
  if (!sameRow || !sameCol) {
    // Calculate the new index
    var index = totalCols * row + col;
    // Update the model
    changeIndex(sortable, index, sameRow, sameCol);
  }
}

Instead of waiting for a “drop” event, the script continuously calculates the current row and column based on the pointer’s x and y translation divided by the cell size. If the dragged item enters a new grid cell, it immediately updates the virtual array model and triggers a reflow of the surrounding elements via GSAP, creating a seamless, real-time shuffling effect.

Feel

Tactile and immediate. The cards lift physically toward the user via a scaling box-shadow transition. Dragging feels mechanically precise; the surrounding grid reacts instantly to the cursor’s position, snapping adjacent items out of the way. It removes the barrier of “submitting” a change, making the data feel like tangible tiles on a glass table.