"""
end
```
To the container of the list, we add the hook that we defined earlier, along with the `data-list_id` attribute that helps identify the list where elements are being dropped. We also include the `data-id` custom attribute in each container of the list elements, which helps to identify the element being dragged. Our component is now ready for use! Let’s prepare the necessary assigns and render it inside a LiveView.
```elixir
defmodule ComponentsExamplesWeb.ShoppingListLive do
use ComponentsExamplesWeb, :live_view
def mount(_params, _session, socket) do
list = [
%{name: "Bread", id: 1, position: 1, status: :in_progress},
%{name: "Butter", id: 2, position: 2, status: :in_progress},
%{name: "Milk", id: 3, position: 3, status: :in_progress},
%{name: "Bananas", id: 4, position: 4, status: :in_progress},
%{name: "Eggs", id: 5, position: 5, status: :in_progress}
]
{:ok, assign(socket, shopping_list: list)}
end
def render(assigns) do
~H"""
<.live_component
id="1"
module={ComponentsExamplesWeb.ListComponent}
list={@shopping_list}
list_name="Shopping list"
/>
"""
end
end
```
Let’s see what we’ve achieved:
Tada! Our component works!… or not?
Do you remember that the Hook sends some data to our component when an element dropped into its final position? We still need to handle that event:
```elixir
def handle_event("reposition", params, socket) do
#Put your logic here to deal with the changes to the list order
#and persist the data
IO.inspect(params)
{:noreply, socket}
end
```
Let’s see what parameters are sent to our component:
```elixir
%{
"id" => "1",
"new" => 1,
"old" => 0,
}
```
Yay! We fixed the small error we had!
Did you notice any other issues in the video above? There is one small detail that needs improvement - the formatting of the ghost CSS that is displayed in the new position where we might drop the element, as well as the appearance of the dragged HTML element.
## Formatting draggable list items
Fixing this detail is simple. We’ve already specified the CSS classes to format the drop placeholder and the dragged article. However, instead of defining new CSS classes, we can leverage the ones already defined by Tailwind. The only issue is that we can only specify a single CSS class in the Sortable object’s configuration, not a list of classes.
Thankfully, there’s a neat solution: we can use [Tailwind variants](/content/phoenix-files/phoenix-liveview-tailwind-variants/ ""/index.html) to extend the CSS classes we previously specified. To do this, we only need to add a few lines to our `tailwind.config.js` file:
```javascript
plugin(({addVariant}) => addVariant("phx-no-feedback", [".phx-no-feedback&", ".phx-no-feedback &"])),
plugin(({addVariant}) => addVariant("phx-click-loading", [".phx-click-loading&", ".phx-click-loading &"])),
plugin(({addVariant}) => addVariant("phx-submit-loading", [".phx-submit-loading&", ".phx-submit-loading &"])),
plugin(({addVariant}) => addVariant("phx-change-loading", [".phx-change-loading&", ".phx-change-loading &"])),
+plugin(({addVariant}) => addVariant("drag-item", [".drag-item&", ".drag-item &"])),
+plugin(({addVariant}) => addVariant("drag-ghost", [".drag-ghost&", ".drag-ghost &"])),
```
And make a small modification to our component:
```elixir
def render(assigns) do
~H"""
"""
end
```
Let’s see how it looks:
Tada! looks better huh?
## Bonus: multiple lists
What if we want to drag items between different lists? It is an option that Sortable already has, we just have to configure it:
```javascript
Hooks.Sortable = {
+ let group = this.el.dataset.group
mounted(){
let sorter = new Sortable(this.el, {
+ group: group ? group : undefined,
animation: 150,
delay: 100,
dragClass: "drag-item",
ghostClass: "drag-ghost",
forceFallback: true,
onEnd: e => {
let params = {old: e.oldIndex, new: e.newIndex, ...e.item.dataset}
this.pushEventTo(this.el, "reposition", params)
}
})
}
}
```
With this option, you can move items between all lists that share the same group. Now we just need to add an assign `:group` to our component, and the `:data-group` attribute to the `
` where we set the Hook:
```elixir
def render(assigns) do
~H"""
"""
end
```
We can add as many lists as we need:
```elixir
def render(assigns) do
~H"""
<.live_component
id="1"
module={ComponentsExamplesWeb.ListComponent}
list={@shopping_list}
list_name="Shopping list 1"
+ group="grocery_list"
+ />
+ <.live_component
+ id="2"
+ module={ComponentsExamplesWeb.ListComponent}
+ list={@shopping_list}
+ list_name="Shopping list 2"
+ group="grocery_list"
+ />
"""
end
```
We can also send the data to identify the destination list as part of the event parameters sent to the component, by using the `e.to.dataset` attribute:
```javascript
Hooks.Sortable = {
let group = this.el.dataset.group
mounted(){
...
onEnd: e => {
- let params = {old: e.oldIndex, new: e.newIndex, ...e.item.dataset}
+ let params = {old: e.oldIndex, new: e.newIndex, to: e.to.dataset, ...e.item.dataset}
this.pushEventTo(this.el, "reposition", params)
}
})
}
}
```
As a result, we obtain new parameters that can be used to identify the destination list and modify the event handling logic accordingly:
```elixir
%{
"id" => "1",
"new" => 2,
"old" => 1,
"to" => %{"group" => "grocery_list", "list_id" => "2"}
}
```
## Discussion
In this post, we’ve learned how to set up SortableJS in our LiveView app and use it in our live components. But here’s the thing - we’re not actually doing anything with the data we send from the client to the server yet. We still need to figure out how to persist our elements and the position changes.
In addition, currently we’re keeping all the elements of the list in memory, which is an area for potential improvement. Fortunately, LiveView provides some incredible tools that allow us to effectively manage large collections without needing to keep them all in server memory at all times. So, the next step is to optimize our component using LiveView Streams.