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.

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.

2 Likes

I have an example with code here:

10 Likes

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

I would.

2 Likes

Excellent!