Build a Trello Clone With Livewire
This episode is for members only

Sign up to access "Build a Trello Clone With Livewire" right now.

Get started
Already a member? Sign in to continue
Playing
30. Customising sortable styles

Episodes

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

Transcript

00:00
One thing that you'll probably want to do is customize any of the options for sortable JS,
00:05
but via the package that we pulled in to allow this to be sortable within our LiveWire components. Now, to do this, it's very, very simple. Let's go over to our board show and let's come down to the point where we are defining out all of our sortable stuff just inside of here. Now, the one thing that I'm going to change in this episode is the ghost class.
00:26
Now, when we move this, notice that the card behind doesn't really look like it's not there. It's sort of exactly the same styles. So we want to change the card behind this that's being moved to something with a little bit less opacity. So to do this, we go ahead and use wire sortable like we've done the majority of the time.
00:46
And we're going to just provide a bunch of options. These options are just going to be anything that sortable JS provides. So if you find an option that you need to change over or slightly customize how this works on the sortable JS documentation, you can just add in any of these options in here.
01:02
So we're going to specifically add the ghost class that we want to change. That's going to be that card or column behind. So we can use tailwind styles in here. So I'm just going to change this to an opacity of 20.
01:14
Let's see the difference that this makes now when we move a column around. And you can see that just behind here that has a lot less opacity. And it sort of helps when we're moving this across because we can actually see now where we're putting it. We can do the same thing for the cards as well.
01:28
So we just use exactly the same thing in here. And we're going to go over to our column and we're just going to change this over where we have our list of cards. So let's just go to where we're iterating through our cards and we'll do the same thing directly in here as well. The only difference here is that we need to provide this as the group.
01:46
So we're going to say sortable group options because of course we know our cards are now grouped between each column. Let's go over and try this out. And as you can see, now they have a lot less opacity and it's much easier to see. So any options that you need from sortable.js, just go ahead and pass them either into the group options or the overall options for each of the columns.

Episode summary

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.

Episode discussion

No comments, yet. Be the first!