Add x-sort:ignore

Author: calebporzio

packages/docs/src/en/plugins/sort.md

@@ -175,6 +175,37 @@ By default, each `x-sort:item` element is draggable by clicking and dragging any
 
 As you can see in the above example, the hyphen "-" is draggable, but the item text ("foo") is not.
 
+<a name="ignoring-elements"></a>
+## Ignoring elements
+
+Sometimes you want to prevent certain elements within a sortable item from initiating a drag operation. This is especially useful when you have interactive elements like buttons, dropdowns, or links that users should be able to click without accidentally dragging the sortable item.
+
+You can use the `x-sort:ignore` directive to mark elements that should not trigger dragging:
+
+```alpine
+<ul x-sort>
+    <li x-sort:item>
+        <!-- ... -->
+
+        <button x-sort:ignore>Edit</button>
+    </li>
+
+    <li x-sort:item>
+        <!-- ... -->
+
+        <button x-sort:ignore>Edit</button>
+    </li>
+
+    <li x-sort:item>
+        <!-- ... -->
+
+        <button x-sort:ignore>Edit</button>
+    </li>
+</ul>
+```
+
+In the above example, users can click and drag the item itself, but clicking on the "Edit" button will not initiate a drag operation.
+
 <a name="ghost-elements"></a>
 ## Ghost elements
 

packages/sort/src/index.js

@@ -98,6 +98,9 @@ function initSortable(el, config, preferences, handle) {
         scrollSensitivity: 50,
 
         filter(e) {
+            if (e.target.hasAttribute('x-sort:ignore') || e.target.hasAttribute('wire:sort:ignore')) return true
+            if (e.target.closest('[x-sort\\:ignore]') || e.target.closest('[wire\\:sort\\:ignore]')) return true
+
             // Normally, we would just filter out any elements without `[x-sort:item]`
             // on them, however for backwards compatibility (when we didn't require
             // `[x-sort:item]`) we will check for x-sort\\:item being used at all