Sortable JS + Alpine.js For Drag and Drop Sorting - 23

▶

The next step we're going to take is to make the state sortable, that is, sortable by drag and drop. We can select an item and place it elsewhere.

This is very easy. There's already a JavaScript plugin; it's not part of Alpine, but we can easily integrate it. The plugin is called SortableJS. We type "sortable js" and click the first link. As I mentioned, it's not a specific plugin for Alpine, but is pure JavaScript.

Here you can see some demos of how it works: click, hold, and drag. And, as I said, there are many possible implementations: for sharing, sorting, etc.

Installation with CDN

We're interested in installing it through the CDN. You can search for "sortable js cdn." If you don't find anything at first, you can go directly to the jsDelivr page or similar. In this case, we'll find the CDN, copy it, and paste it into our project.

I'm going to place it right after the Alpine script to maintain order. It's very simple to use, as you can see in the official documentation. Basically, it involves obtaining the list of elements using a selector and then applying Sortable.create, passing it the element. With that, the content would be sortable. Quite simple.

Integration with Alpine

Now, since this plugin isn't part of the Alpine ecosystem, we have to do a bit of work to integrate it. In Alpine, we have an attribute called x-init, which is executed when the component is created. In other words, it acts as a sort of constructor, and we can use it to perform this initialization.

So, what we'll do is reference our list—which is what we want to make sortable—using x-ref, although you can perfectly use a selector like those shown in the official documentation (for example, document.querySelector, getElementById, etc.).

In one of the examples, you can see that it's referenced directly this way. But since we like to keep things complicated, we'll use x-ref.

Sample code

Once the plugin is installed, we check that we don't have any 404 errors. Everything's perfect. Then we can begin.

I'm going to add an x-init="order" to keep everything organized. We'll create this order method just below data. We'll add it like this:

order() {
 console.log("Inicializando sortable...");
}

Here you can see that, when the component is created, this method is called. Very simple. In this method, we take the opportunity to initialize Sortable.

Sortable.create(this.$refs.items);

Here we pass the ref we defined as items. Then, in our HTML, we place:

<div x-ref="items">
 <!-- ítems a ordenar -->
</div>

With this everything should work correctly.

Summary

To summarize a bit:

We used x-init to initialize our component, which is ideal for external plugins like SortableJS.

We used x-ref as an alternative to querySelector, getElementById, etc.

We saw how to install and use a plugin that isn't part of the Alpine ecosystem directly in our components.

With this, you can enrich your interface without the need for more complex tools.