Drag and Drop Sorting With Livewire
This episode is for members only

Sign up to access "Drag and Drop Sorting With Livewire" right now.

Get started
Already a member? Sign in to continue
Playing
04. Dispatching the new order

Episodes

0%
Your progress
  • Total: 22m
  • Played: 0m
  • Remaining: 22m
Join or sign in to track your progress

Transcript

00:00
Now that we can sort, we need to dispatch an event to tell our Alpine component that the list has been ordered. And then what we can do with that Alpine component
00:10
is go ahead and let our Livewire component know and update everything. So let's go through this step by step. OK, so Sortable provides us a bunch of events that are fired.
00:20
And one of them is onSort, which, as you can guess, will fire once this list has been sorted. So let's just go ahead and, again, console log out just a couple of details here.
00:30
So let's output L.Sortable, which we've assigned here, and see what that contains. So let's go and bring up our console once again and just go ahead and reorder something.
00:40
And as you can see, sure enough, we get that sortable object in here. And that contains a bunch of things, but it will also contain all of the IDs that we have sorted.
00:51
Now to get them, we're going to go ahead and cast this to an array. Let's go and take a look at that again. Pull this down.
00:58
And yeah, there we go. You can see that we moved two upwards and one downwards, which has given us a sort order of 2, 1, and 3. So what we can do with this now is
01:07
we can go ahead and dispatch an event in here to let our Alpine component over here know that this has happened. We're going to dispatch a custom event for this. So we're going to use that element,
01:18
and we're going to say dispatch event. And then into this, we're going to create a new custom event. And we're going to give this a custom name. So I'm going to call this sorted,
01:30
and you can call that whatever you like. Inside of this object, we can provide a detail. And that's going to contain a list of these sorted items, which we know comes from this to array just here.
01:40
So let's pull this into the detail, and we're pretty much done. So now let's pick this up, and then we're going to go and convert these over to integers,
01:48
because at the moment, they're strings. So when we pass them through, they're not going to be compatible with what we need. So let's go ahead and pick up this sorted event over in links.
01:58
So we can up here say x on, and now we can use that custom sorted event that we've just given. And let's go ahead and console log out on the event that we get through in here.
02:10
So let's go over, and let's sort these. And yeah, there we go. We get our custom event. So very easily, we could just access the detail there,
02:18
and then of course, we could pass that back over to Livewire to sort these. So just to finish up, let's go ahead and convert these over to integers so they're suitable for what we need,
02:27
and then we're done. So to do this, we can just go ahead and map through this array with JavaScript, taking each of the IDs, and we could just
02:34
use pass int on each of these IDs to give us back a list of pure IDs or pure integers. And there we go. Great.
02:42
So however we sort this now, every time we do, we get this new order, which we can then use on the back end to update this. We're going to do that in the next episode.

Episode summary

In this episode, we're connecting the dots between sorting a list in our UI and actually letting the rest of our app know what's happened. Basically, after we've dragged to rearrange our items, we want to communicate this new order up to our Alpine.js component, and eventually back to our Livewire component (or wherever your backend logic is).

We start by looking at the onSort event from the Sortable library, which fires off every time we reorder the list. First, we log out some details to the console to see what Sortable gives us (pro-tip: it's got all the sorted IDs in there). Once we see those IDs, we cast them into an array and then, to make our lives easier later, make sure they're in integer format (not strings).

The key thing here is dispatching a custom event called sorted using JavaScript's dispatchEvent. We attach the sorted list as the event detail, and then over in our Alpine component, we listen for this event using x-on:sorted. Once we catch it, we can easily use the event details (the new list order) to update whatever needs updating—like passing the sorted IDs back to Livewire.

So by the end of this one, we've got a nice loop: drag to sort, fire off an event with the new order, and be ready to sync that new order to the backend in the next episode. All the groundwork is set up and ready for back-end updates!

Episode discussion

No comments, yet. Be the first!