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
03. Building a Sortable.js plugin

Episodes

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

Transcript

00:00
So how are we going to build out this sortable functionality?
00:03
Well we're going to go ahead and use a really popular package sortable.js to do this, but we need to integrate this within Alpine so we can create a really nice directive and just apply it to this list of things and have it work. So by the end of this
00:18
episode we will be able to drag and reorder all of the items in our list. Okay so the first thing that we're going to do is go ahead and look at manually bundling Alpine within Livewire. This is really important because by default
00:33
Alpine is included within Livewire but that means we can't easily register plugins. So what we're going to do is follow these instructions here and then we'll be able to create our own plugin attach it to Alpine and have that functionality on the page.
00:47
So the first thing that we want to do is go ahead and pull in this directive which is going to allow us to start manually bundling this and we're going to put this into our app.blade.php file so it's global. Next up we're going to go ahead and pull in Alpine and Livewire
01:02
directly into our app.js file just at the top here. We'll go ahead and import this then we're going to go ahead and start Livewire. Now what this means is in between this we can register any plugins directly on Alpine just here. Let's take a look
01:20
at what that looks like. Okay so we'll go ahead and create this out in a separate file so let's just create this in the root of our JavaScript project and I'm going to call this sortable.js. Inside of here we're going to go ahead and export out a
01:34
function and that's going to go ahead and take Alpine into it when we register that as a plugin and then in here we can do pretty much anything that we want. So let's just log something out for now just so we know that this is working. So next up we're
01:48
going to go ahead and import that sortable thing that we've just created so let's pull that in directly from sortable just here and then we're going to go ahead and say Alpine plugin and we're just going to pass sortable directly into there.
02:03
Alpine will automatically be injected into here for us so we can use any of the functionality. So now that we've done that if we just come over to our page here and open up the console you can see that sure enough that plugin is now active and you can see
02:16
abc being logged out. So now this means we can go ahead and pull in sortable and apply it as a directive. So let's go and do an npm install on sortable.js and now that's done we can simply import it in here and then start to build this out. So let's
02:32
import sortable from sortable.js at the top here and then down here we're going to use Alpine that we get in to register out a directive. So let's create this out and then I'll show you how to use it. So we're going to call this
02:45
sortable into this we're going to get the element that we've applied this to so let's pull that element in and again we'll just console log out on that element. Now at this point we won't see anything if we just come over here nothing is happening but what we can now do is over on our
03:00
links component we can apply this to this list. So let's do this just up here so let's pull this down we'll go ahead and initialize this as an Alpine component so we'll just set xdata in there and then we're going to use that
03:13
directive that we've just built so x sortable. Now that we've applied that as you can see this is now giving us that list of then three items that we've just created great. Okay all that's left to do now is in here bind sortable
03:27
to this element so we can start to sort so we're going to go ahead and say l and sortable and we're going to use the sortable plugin here create that out and then go ahead and pass l as that element and then in here we get a bunch of options
03:43
that we can provide with this plugin so this here is just that plugin that we're defining. Okay let's go over and just see what's happened here and as you can see I can go ahead and sort these so super simple to get this working now
03:57
one really important part about this is the data id attribute property so what we want this to be is a custom id that we define in here so for this what we're going to do is set this to x sortable item and then over in links.blade.php
04:17
what we can do is for each one of these we can give them that attribute so let's go ahead and pull this down and in here we're going to say x sortable item and we're going to set that to the link id so they are uniquely defined first of all but
04:32
also once this list is sorted each of these ids are going to be the things that we want to update in the database and we need the order as well. Okay so now that we've done that let's go over make sure that this is all working and yeah it looks like we can sort this list
04:48
but of course at the moment we don't get any event dispatch to tell us when this is sorted so obviously we can't go ahead and pick this up directly within our livewire component so let's go ahead and look at emitting this in the next episode

Episode summary

In this episode, we're diving into making our lists sortable using the popular sortable.js package, but with an Alpine.js twist! We'll walk you through how to manually bundle Alpine into Livewire instead of using the default setup. This approach is important because it lets us register custom Alpine plugins easily.

First up, we adjust the build to import Alpine and Livewire directly in our main JavaScript file, and set up the app so that we can call Alpine.plugin(...) to add any plugins we want. Then, we jump straight into creating our own sortable.js Alpine plugin. To make sure it's working, we log out a quick test in the console, and voilà – our plugin is active!

Next, we install the actual sortable.js library, import it into our new plugin file, and show you how to use Alpine's API to register a custom directive (which we'll call x-sortable). This directive gets attached to your list in the Blade file—just add x-sortable to your component, and you're good to go.

We wire things up so that you can drag and drop to reorder items in your list, and introduce a data attribute (x-sortable-item) to uniquely identify each list item by its ID. This prepares everything for keeping your database in sync with the updated order later.

By the end, you've got a sortable list in Livewire using Alpine and sortable.js, with unique IDs in place. Next episode, we'll handle dispatching an event so Livewire can actually save those new orders. But for now, you've learned the full setup for integrating a third-party drag-and-drop library with Alpine in a Livewire project. Pretty sweet!

Episode discussion

No comments, yet. Be the first!