How is drag sorting a list implemented in Phoenix LiveView?

Watching a video from the ElixirConf 2020 and noticed a drag event for sorting a list in the view. Anyone know what he is using or could point me in the right direction? Thanks.

1 Like

You need a javascript library to handle the drag and drop. For most of them you can have a callback when the order was actually changed, from where you can then send an event to the liveview (all that is done within a liveview hook).

Ah okay, thought it might have been something built in. Thanks!

I have been using sortable.js for this…

with a callback updating a position field on the backend.


I have an example with code here:


Would you still use sortable.js today? Or are there better options two years later?

I would.



Your blog was very useful, do you have a way to test that drag and drop, and sorting functionality? How to write a test for that?

You’d probably want to use GitHub - elixir-wallaby/wallaby: Concurrent browser tests for your Elixir web apps. for that (though not sure if it supports drag and drop events)

1 Like

You can either use wallaby to mimic the entire browser interaction but I would just use render_hook and test the liveview part and skip the JS.


Ah yes this is exactly how I tested it, just used render_hook and send event with it. This was the easier approach, but I didnt try wallaby before and need to give it a try in more complex scenarios. Thank you both @mayel @andreaseriksson