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
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.
6 episodes• 22 mins•4 months ago
Overview
Easily add drag and drop sorting functionality to your Livewire components with an Alpine directive, powered by Sortable.js.
We’ll start with a list of ordered items, activate drag and drop sorting, and then feed the new order back to Livewire to instantly update the database.
Once you’re done, you’ll be able to reuse this functionality in any of your Livewire components.
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!
Comments
No comments, yet. Be the first to leave a comment.