What you'll learn

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.

‍

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

‍

Example of drag and drop:

Source code

‍https://github.com/kelseyleftwich/phoenix-liveview-hook-demo

‍

Blog post

‍Create a Client-Side Drag and Drop in Phoenix LiveView 

‍

Phoenix LiveView resources

Phoenix LiveView documentation about JavaScript interoperability

Walk-Through of Elixir LiveView | Elixir School

‍

Another approach: LiveView Trello clone by Pedro Assunção

Source code for Trello Clone by Pedro

JavaScript for Trello Clone by Pedro