Sortable icon indicating copy to clipboard operation
Sortable copied to clipboard

[Feature] Request: Make The "draggable" Property A Selector So That Descendant Elements Enable Draggging, Not Just Direct Child Elements

Open WoofGrrrr opened this issue 7 months ago • 0 comments

My sortable list is a table (TABLE element,) and I would like for the draggable elements in that table to be the individual tables cells (TD elements,) not the entire rows (TR elements.) Some of the cells in my table contain buttons or checkboxes, etc, and I would like for the spaces in the cells around those elements to NOT allow dragging.

The docs on the README page say this:

draggable: ".item", // Specifies which items inside the element should be draggable

It doesn't say whether it can be a selector or just a class.

This is a very simplified template for my Sortable list:

<table class="identity-list">
  <tr class="identity-item">
    <td class="identity-item-controls-wrapper">
      <input type="checkbox" class="identity-item-check" identityId="item1">Check 1
    </td>
    <td class="identity-id identity-item-draggable">
      item1
    </td>
    <td class="identity-name identity-item-draggable">
      Identity #1 Name
    </td>
    <td class="identity-item-controls-wrapper">
      <input type="checkbox" class="identity-item-check" identityId="item1">Check 2
    </td>
  </tr>
</table>

I tried using a selector like this:

draggable: ".identity-item > .identity-item-draggable"

It does not work.

I also tried simply this:

draggable: ".identity-item-draggable"

It also does not work.

I then moved the identity-item-draggable class to the table rows (the TR elements) instead, and that DOES work.

So I would like to request that it be made to work for a selector that matches any descendant elements. But that would probably be very difficult...

WoofGrrrr avatar Mar 29 '25 18:03 WoofGrrrr