LearnNewsExamplesServices
Frontmatter
id7207
titleEnhance container.SortZone for Complex Layouts
stateClosed
labels
enhancementstale
assigneestobiu
createdAtAug 21, 2025, 11:12 AM
updatedAtDec 4, 2025, 3:59 AM
githubUrlhttps://github.com/neomjs/neo/issues/7207
authortobiu
commentsCount3
parentIssue7201
subIssues[]
subIssuesCompleted0
subIssuesTotal0
blockedBy[]
blocking[]
closedAtDec 4, 2025, 3:59 AM

Enhance container.SortZone for Complex Layouts

Closed v11.16.0 enhancementstale
tobiu
tobiu commented on Aug 21, 2025, 11:12 AM

Goal

To refactor and enhance Neo.draggable.container.SortZone to support more complex drag-and-drop scenarios, such as dragging a component via a child handle. This will make the base class more generic, powerful, and reusable, significantly reducing the need for complex overrides in subclasses like DashboardSortZone.

Tasks

  1. Add dragHandleSelector Config:

    • In src/draggable/container/SortZone.mjs, introduce a new configuration property: dragHandleSelector.
    • Type: String
    • Default: null
    • Purpose: This selector will identify a child element within a sortable item that serves as its drag handle.
  2. Refactor onDragStart:

    • Modify the onDragStart method to incorporate the new dragHandleSelector.
    • If dragHandleSelector is set, the logic must:
      • Verify the drag was initiated on an element matching the selector.
      • Identify the parent component that owns the handle as the actual item to be dragged.
      • Implicitly filter the owner's items to only consider components containing a dragHandleSelector element as sortable. All internal logic (e.g., creating itemRects) should operate on this filtered list.
    • If dragHandleSelector is null, the method must fall back to its original behavior to ensure backward compatibility.
  3. Ensure Method Compatibility:

    • Review and adjust other methods (onDragEnd, switchItems, updateItem) to ensure they correctly handle the filtered list of sortable items and the associated index mappings.

Acceptance Criteria

  • When dragHandleSelector is configured on a SortZone, dragging an element matching the selector initiates a drag operation for its parent component.
  • Items within the SortZone's owner that do not contain an element matching the dragHandleSelector are not considered sortable and are ignored by the drag-drop logic.
  • The DashboardSortZone can be refactored into a minimal subclass that primarily just configures the dragHandleSelector.
  • Existing functionalities that use container.SortZone (e.g., tab header reordering) remain unaffected and work as before.
tobiu assigned to @tobiu on Aug 21, 2025, 11:12 AM
tobiu added the enhancement label on Aug 21, 2025, 11:12 AM
tobiu added parent issue #7201 on Aug 21, 2025, 11:12 AM
tobiu referenced in commit 61692a5 - "#7207 dragHandleSelector config" on Aug 21, 2025, 11:24 AM
tobiu referenced in commit 6f2a206 - "#7207 wip" on Aug 21, 2025, 3:04 PM
tobiu referenced in commit 2e26e1f - "#7207" on Aug 21, 2025, 4:22 PM
tobiu reopened this issue on Dec 4, 2025, 3:59 AM