Drag and Drop with Elixir - Phoenix LiveView and JavaScript Interop
source link: https://www.headway.io/events/elixir-and-javascript-interop-with-phoenix-liveview-drag-and-drop
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Presented By
Get updates on future events!
Spread the Word!
SHARE
Drag and Drop with Elixir - Phoenix LiveView and JavaScript Interop
Learn how to leverage JS interoperability to implement drag and drop in a Phoenix LiveView project.
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
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK