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
05. Updating the order
Transcript
00:00
So with the IDs that we're getting through with our custom sorted event, we want to pass these over to LiveWire to then actually update
00:06
the links. Let's go ahead and create out a method to do this first of all, and then we'll go ahead and call this. So in here, let's go and create out a update order method.
00:17
And for now, let's just die dump on here just to make sure that this is working. So let's just say update. OK, so how do we call this from Alpine?
00:25
Well, this is really, really easy. All we need to do is reference wire, and then go ahead and call the method that we've just created. So let's say update order, and that's
00:34
pretty much what we need to do. So let's go over and just try this out. And yeah, there we go. We're calling that LiveWire method directly from Alpine.
00:42
Obviously, we need to pass this data in. So let's go and pass the detail in, which contains, remember, that array of IDs. And then we can go ahead and accept this into here.
00:51
So let's say array, and we'll call that order. And let's instead die dump on that order just to make sure we're getting that through. Great.
00:58
OK, let's go ahead and try this again. And yeah, there we go. We get 213 with the way that we've ordered that. OK, so now we want to update the order of the actual links,
01:08
the most important part. So to do this, we just use the link model. Now remember, at this point, this isn't scoped. We'll cover that in the next episode.
01:16
But this will just adjust the order that we've set. So I'm going to say link set new order. That comes from that sortable package, that eloquent orderable or sortable package
01:25
that we've just pulled in. And then we just need to pass that directly into there. And would you believe that is as easy as it is? So let's go over and see if this has worked.
01:36
Let's come over. I'm going to move item one to the middle. There we go. Give that a refresh.
01:41
And yeah, sure enough, the ordering has been set. And of course, when we refresh the page, this order is going to be in the order that we've given. Great.
01:50
So yeah, we can just go ahead and sort these however we want now. And it's always going to be updated in the back end. OK, so there's one problem here.
01:58
If we have a link that doesn't belong to that user, this is also going to potentially be included in this sort. So let's go over and fix that in the next episode.
6 episodes• 22 mins•1 year 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!
Episode discussion
No comments, yet. Be the first!