Drag and Drop Sorting With Livewire
Playing
01. Introduction and demo

Episodes

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

Transcript

00:00
In this course I'm going to show you how to implement drag and drop sorting within your
00:03
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
00:20
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
00:40
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
01:00
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
01:19
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.

Episode summary

Welcome to the course! In this episode, we kick things off by showing you exactly what we're building: a drag-and-drop sortable list for your Livewire components, backed by your database. We start with a quick demo, so you can see drag-and-drop reordering in action—moving items around updates the order, and even after refreshing the page or checking the database, the new order sticks around!

Next, I give you a quick overview of the tech we're going to use to make all this happen. On the backend, we'll be using a handy package that makes it super easy to update the order of your records with just a single column. For the frontend, we'll set up an Alpine.js plugin using sortable.js, which will work as a directive you can drop into any list in your app. This makes the solution really flexible and reusable—wherever you need reordering, you can just use this directive.

By the end of this episode, you’ll have a clear idea of what we're building, how it works, and what tools we'll use. Next up, we'll start outputting our items in the right order and get into the nitty-gritty of building that plugin. Let's get started!

Episode discussion

No comments, yet. Be the first!