Drag and Drop with Elixir Lang - Phoenix LiveView and JavaScript Interop

Learn how to create a drag and drop app in Elixir Lang with Phoenix LiveView and how to leverage JavaScript interoperability. Interactions like drag and drop are either better handled by the client or can only be handled by the client. Phoenix LiveView server-side rendering is very fast. However, there are situations where client-side implementation results in a better user experience.

In this tutorial, Kelsey Leftwich, Senior Developer at Headway will teach you how to make client-side events communicated to the server-side modules using client hooks. After watching this Phoenix LiveView tutorial, you should be able to implement drag and drop in your own Elixir Lang project.

Source Code:

Segments:
00:00 - Overview
01:15 - Drag and Drop Example
01:39 - Intro to Phoenix LiveView
03:10 - Why Use JavaScript?
03:47 - Starting with Empty Phoenix LiveView Project
04:23 - Styling and JS Dependencies
04:55 - PageLive
5:45 - Dropzone LiveComponent
07:25 - PageLive EEx Template
07:55 - Pool Dropzone
08:19 - What We Have So Far
08:35 - Adding a Drag Hook
09:13 - Lifecycle Functions
10:15 - Hooking Up Our Hooks
11:45 - Adding SortableJS
14:05 - Almost Done
14:40 - Events
15:47 - Push Event to LiveView
17:08 - Handling Event Payload
18:16 - Helper Functions
18:29 - We're Done!
18:54 - Next Steps & Resources
20:40 - Questions

Resources mentioned:
Blog Post from This Video

Phoenix LiveView documentation about JavaScript interoperability

Walkthrough of Elixir LiveView | Elixir School

Open Office Hours with Headway

#elixirlang #phoenixliveview #appdevelopment

[headwayio]

Source Code:

Segments:
00:00 - Overview
01:15 - Drag and Drop Example
01:39 - Intro to Phoenix LiveView
03:10 - Why Use JavaScript?
03:47 - Starting with Empty Phoenix LiveView Project
04:23 - Styling and JS Dependencies
04:55 - PageLive
5:45 - Dropzone LiveComponent
07:25 - PageLive EEx Template
07:55 - Pool Dropzone
08:19 - What We Have So Far
08:35 - Adding a Drag Hook
09:13 - Lifecycle Functions
10:15 - Hooking Up Our Hooks
11:45 - Adding SortableJS
14:05 - Almost Done
14:40 - Events
15:47 - Push Event to LiveView
17:08 - Handling Event Payload
18:16 - Helper Functions
18:29 - We're Done!
18:54 - Next Steps & Resources
20:40 - Questions

[majorcode]

Thank you for allowing attendees to open their mic and interact. It's nice in these days when we can't meet in person.

[PreRenderedRealities]

Coming back to this one after implementing a few basic hooks, and yeah this is an INCREDIBLY useful tutorial. Thank you!

[marksadegi]

excellent tutorial! i especially appreciate how you take extra effort to make references to previous parts of the code. thank you!

[rayd]

Thanks for sharing. It's cool from a front end engineer's view to explore live view.

[springer]

I appreciate the detail you've provided in this tutorial! Thank you!