Sortable
Demo
Order Info: Order Info
Open your console to see an event results
Item 1
Item 2
Item 3
Item 4
Item 5
Explanation
In the original example you had to hook into HTMX’s events. With Datastar you already have signals to effect change.
<div
data-store="{orderInfo:''}"
data-on-store-change="$orderInfo?.length > 0 && console.log(`You could send this to the server! ${$orderInfo}`)"
>
<div>OrderInfo: <span data-text="$orderInfo">Order Info</span></div>
<div id="sortContainer">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
<div>Item 5</div>
</div>
<script type="module" src="/static/js/sortable.js"></script>
</div>
The HTML looks pretty straightforward. Create an orderInfo
signal and when it has has data fire off an event.
I’ve separate out the js content to avoid Markdown escaping in this example
import Sortable from 'https://cdn.jsdelivr.net/npm/sortablejs@1.15.3/+esm'
const sortContainer = document.getElementById('sortContainer')
new Sortable(sortContainer, {
animation: 150,
ghostClass: 'opacity-25',
onEnd: (evt) => {
if (!window.ds) throw new Error('Datastar is not defined')
const orderInfo = ds.signalByName('orderInfo')
orderInfo.value = `Moved from ${evt.oldIndex} to ${evt.newIndex}`
}
})
Here we are grabbing the Datastar object directly and updating the signal.
Anything you can do in HTMX or Alpine should be possible in Datastar.