Skip to content

refactor: Replace SortableJS 3/4: drop SortableJS from SlickDraggableGrouping (native drag & drop) - #1243

Open
6pac-ai wants to merge 1 commit into
refactor/drop-sortablejsfrom
refactor/drop-sortablejs-grouping
Open

refactor: Replace SortableJS 3/4: drop SortableJS from SlickDraggableGrouping (native drag & drop)#1243
6pac-ai wants to merge 1 commit into
refactor/drop-sortablejsfrom
refactor/drop-sortablejs-grouping

Conversation

@6pac-ai

@6pac-ai 6pac-ai commented Jul 17, 2026

Copy link
Copy Markdown
Collaborator

Context

Part 3 of the SortableJS removal (port of slickgrid-universal's refactor(core)!: drop SortableJS dependency #2634). Stacked on #1242 (which is stacked on #1240). After this PR nothing in src/ uses SortableJS anymore; the dependency itself and the example <script> tags are removed in the final part.

The header→dropzone characterization spec from #1240 (example-draggable-grouping-header-drop.cy.ts) plus both existing draggable-grouping specs pass unchanged against this port — that was the acceptance gate.

What's in here

  • src/slick.interactions.ts — new setupDropzonePillDrag() (ported from Slickgrid-Universal): native HTML5 reordering of group pills inside the dropzone, acceptance of column-header drops via the dataTransfer column id, and the same Firefox/Linux mouse + touch fallbacks as the column reorder engine. Registered on the Slick namespace for iife/browser builds.
  • src/plugins/slick.draggablegrouping.ts — fully off SortableJS:
    • getSetupColumnReorder() wires setupColumnReorderDrag (grid container/viewport resolved through public grid getters), with the dropzone show/hide UI choreography moved into the engine's onDragStart/onDragEnd/onDrop callbacks;
    • the dropzone runs on setupDropzonePillDrag; the hand-rolled addDragOverDropzoneListeners() is gone (engine callbacks cover it);
    • grouping pills are created with draggable = true (required for the native HTML5 pill drag);
    • a header drop is handled by both the dropzone's native drop handler and the reorder engine's fallback onDrop path, deduplicated by handleGroupByDrop's existing columnAllowed guard (the fallback path is the only one that fires on Firefox/Linux and touch).

Breaking change

getSetupColumnReorder() now returns { columnReorderDragInstance } (a { destroy() } instance) instead of { sortableLeftInstance, sortableRightInstance }. The grid itself never consumed this return value; only external callers holding the SortableJS instances are affected.

Behavior deltas (all deliberate, noted in-code)

  • No more spurious onColumnsReordered after a grouping drop (the old SortableJS onEnd fired it with an unchanged order after every cross-list drop).
  • Grouping pages now respect unorderableColumnCssClass for header reordering (the old plugin's filter was commented out, so non-reorderable columns could be dragged there).
  • Pill drags only reapply the grouping when the pill order actually changed.

Verification

  • Full 47-spec Cypress suite: 600/601 passing, 0 failures (1 intentional pending).
  • Draggable-grouping specs (20 + 21 tests), the header→dropzone characterization (3), and both column-reorder characterization specs (8 + 7) all pass unchanged.
  • dist/browser/plugins/slick.draggablegrouping.js greps clean of SortableJS after a rebuild.
  • Lint and strict TS declaration build clean.

Next (final) part: remove the sortablejs dependency and sweep the example pages.

🤖 Generated with Claude Code

…drop)

Part 3 of the SortableJS removal (port of ghiscoding/slickgrid-universal#2634).
The SlickDraggableGrouping plugin now runs entirely on the native drag engines;
nothing in src/ uses SortableJS anymore (the dependency itself is removed in the
next and final part).

- add `setupDropzonePillDrag()` to slick.interactions.ts: native pill reordering
  inside the grouping dropzone, column-header drop acceptance via the
  dataTransfer column id, with Firefox/Linux mouse and touch fallbacks
- rewire slick.draggablegrouping.ts: `getSetupColumnReorder()` uses
  `setupColumnReorderDrag` (container/viewport resolved through public grid
  getters), the dropzone uses `setupDropzonePillDrag`, and the hand-rolled
  dragover/dragenter/dragleave dropzone listeners fold into engine callbacks
- grouping pills are created with `draggable=true` (required for the native
  HTML5 pill drag)
- a header drop is handled by both the dropzone's native `drop` and the reorder
  engine's fallback `onDrop` path, deduplicated by handleGroupByDrop's existing
  columnAllowed guard
- BREAKING: `getSetupColumnReorder()` now returns `{ columnReorderDragInstance }`
  (a `{ destroy() }` instance) instead of `{ sortableLeftInstance,
  sortableRightInstance }`
- behavior deltas: no spurious onColumnsReordered after a grouping drop;
  grouping pages now respect `unorderableColumnCssClass` (the old filter was
  commented out); pill drags only reapply grouping when the order changed

Full Cypress suite: 600/601 passing (1 intentional pending), lint and TS
declaration build clean.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@6pac 6pac changed the title refactor: drop SortableJS from SlickDraggableGrouping (native drag & drop) refactor: Replace SortableJS 3/4: drop SortableJS from SlickDraggableGrouping (native drag & drop) Jul 18, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants