live wire components really easily. So I'm sure you've seen a drag and drop list before, I'm going to show you a demo of this and then we'll just talk about a couple of things that we're going to do to achieve this. Okay so I've got three items on the page here, these are of course in the database so this is database driven and we don't have an order set

just yet. So let's go over and just change the order around here by dragging one down to the middle, give the page a refresh and yeah sure enough that's the new order of our data. When we come over to the database you can see that the order has been set here really nicely and we can just continue to drag and drop these and it will be automatically saved. So how are we achieving

this? Well in the back end we're going to use a package that allows us to very easily order things by a column but also set a new order as well because that's pretty much what we're doing when we drag and drop, we're setting that new order and updating all of them records. The next thing that we're going to do is build out a plugin in alpine using sortable.js

and this is going to be a directive that we can apply to anywhere so once you've built this plugin out you can just register it and then just use this in anywhere in your application so we're not specifically tying it down to one component and what that means is you can drag something, receive an event to say that this has been reordered and then you can just call a method

in your livewire component to update this with the new order so very very simple to use this once you've built it out. Okay now that we've seen this let's jump over and get a list of items output ordered and then we'll go ahead and finish this up by building the plugin and getting everything updated.