search

SortableJS / Sortable

Reorderable drag-and-drop lists for modern browsers and touch devices. No jQuery or framework required.
https://sortablejs.github.io/Sortable/
MIT License
29.77k stars 3.7k forks source link

SortableJS grouping without a nested DOM structure #2406

Open ricjohn-acosta opened 3 weeks ago

ricjohn-acosta commented 3 weeks ago

Here’s my simplified DOM structure. I would like th elements that share the same data-date attribute to belong to the same SortableJS group. This way, I can drag th elements only within their matching date group, without allowing them to be moved into other groups. Is this possible?

  <thead>
    <tr id="container">
      <th data-date="2024-11-04" id="col1">Column 1</th>
      <th data-date="2024-11-03" id="col2">Column 2</th>
      <th data-date="2024-11-04" id="col3">Column 3</th>
    </tr>
  </thead>

I know that if my DOM structure was the following it would be easier but this would require me to do quite heavy DOM manipulation which I'd like to avoid.

  <thead>
    <tr id="container" data-date="2024-11-04">
      <th data-date="2024-11-04" id="col1">Column 1</th>
      <th data-date="2024-11-04" id="col3">Column 2</th>
    </tr>
    <tr id="container" data-date="2024-11-05">
      <th data-date="2024-11-05" id="col1">Column 3</th>
      <th data-date="2024-11-05" id="col3">Column 4</th>
    </tr>
  </thead>