@alpinejs/docs 3.15.0 → 3.15.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -33,7 +33,7 @@ This is by far the simplest way to get started with Alpine. Include the followin
|
|
|
33
33
|
Notice the `@3.x.x` in the provided CDN link. This will pull the latest version of Alpine version 3. For stability in production, it's recommended that you hardcode the latest version in the CDN link.
|
|
34
34
|
|
|
35
35
|
```alpine
|
|
36
|
-
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.15.
|
|
36
|
+
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.15.1/dist/cdn.min.js"></script>
|
|
37
37
|
```
|
|
38
38
|
|
|
39
39
|
That's it! Alpine is now available for use inside your page.
|
package/src/en/plugins/sort.md
CHANGED
|
@@ -175,6 +175,39 @@ By default, each `x-sort:item` element is draggable by clicking and dragging any
|
|
|
175
175
|
|
|
176
176
|
As you can see in the above example, the hyphen "-" is draggable, but the item text ("foo") is not.
|
|
177
177
|
|
|
178
|
+
<a name="ignoring-elements"></a>
|
|
179
|
+
## Ignoring elements
|
|
180
|
+
|
|
181
|
+
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.
|
|
182
|
+
|
|
183
|
+
You can use the `x-sort:ignore` directive to mark elements that should not trigger dragging:
|
|
184
|
+
|
|
185
|
+
```alpine
|
|
186
|
+
<ul x-sort>
|
|
187
|
+
<li x-sort:item>
|
|
188
|
+
<!-- ... -->
|
|
189
|
+
|
|
190
|
+
<button x-sort:ignore>Edit</button>
|
|
191
|
+
</li>
|
|
192
|
+
|
|
193
|
+
<li x-sort:item>
|
|
194
|
+
<!-- ... -->
|
|
195
|
+
|
|
196
|
+
<button x-sort:ignore>Edit</button>
|
|
197
|
+
</li>
|
|
198
|
+
|
|
199
|
+
<li x-sort:item>
|
|
200
|
+
<!-- ... -->
|
|
201
|
+
|
|
202
|
+
<button x-sort:ignore>Edit</button>
|
|
203
|
+
</li>
|
|
204
|
+
</ul>
|
|
205
|
+
```
|
|
206
|
+
|
|
207
|
+
In the above example, users can click and drag the item itself, but clicking on the "Edit" button will not initiate a drag operation.
|
|
208
|
+
|
|
209
|
+
> **Note:** Elements with `x-sort:ignore` will still function normally (buttons can be clicked, inputs can be focused, etc.) - they are only excluded from drag operations.
|
|
210
|
+
|
|
178
211
|
<a name="ghost-elements"></a>
|
|
179
212
|
## Ghost elements
|
|
180
213
|
|