In this episode, we dive into how to customize the styles for drag-and-drop sorting using Sortable JS in your Livewire components. If you've noticed the default sort styling isn't quite what you want, you're not alone! We'll walk through how to tweak those options easily.
We start by focusing on the "ghost" class—the appearance of the item you're moving and the one that's left behind. By default, it's not very different from the other cards, so it's hard to tell what's being dragged. We'll fix that by customizing the ghost class using TailwindCSS utility classes, dropping the opacity so it's much clearer which card or column is moving.
We'll show you how to add these options both for columns and the grouped cards inside columns. It's as simple as passing the right options into your Livewire component where Sortable is initialized. We'll also talk through where to find more customizable options in the SortableJS docs, and how to apply them in your own project.
By the end of this video, your sortable lists will look and feel much better when dragging items around, and you'll have the knowledge to adjust more options as you like.