Validate your idea through customer development and rapid prototyping
Keep tight feedback loops, measure customer behavior, and build the right product
Grow your product and sustain your business
Challenge the way you've always done it
A show where we go behind the scenes on what it really takes to bring a new product to market.
A podcast about the craft of creating software and effective development teams.
A podcast about building successful software. We provide actionable advice around product validation, execution, and promotion.
Insights & perspectives to help you navigate the ever changing seas.
By filling out this form you agree to receive future marketing emails and newsletters from Headway
By filling out this form you agree to receive future marketing emails and newsletters from Headway
Bring co-workers, friends, and anyone else you think would benefit from the community.
Learn how to leverage JS interoperability to implement drag and drop in a Phoenix LiveView project.
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.
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
Stay up to date on upcoming events like this one and get valuable resources delivered to your inbox.
Receive the latest articles, resources, events, and more!
