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.
4 Likes
I have an example with code here:
11 Likes
Would you still use sortable.js today? Or are there better options two years later?
I would.
2 Likes
Excellent!
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.
https://hexdocs.pm/phoenix_live_view/Phoenix.LiveViewTest.html#render_hook/3
2 Likes
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
