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

[@headwayio]

Source Code: github.com/kelseyleftwich/phoenix-liveview-hook-demo 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.

[@headwayio]

Thanks for sharing that! We really enjoy that part.

[@PreRendered]

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

[@headwayio]

Love it! Glad you found it helpful.

[@marksadegi]

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

[@headwayio]

We appreciate that feedback and glad you found it helpful!

[@rayd3738]

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

[@springer604]

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

[@headwayio]

Good to hear! We appreciate the feedback.

[@sunnycareboo8924]

exactly what I was looking for

[@headwayio]

Good to hear. Glad Kelsey could help!

[@lucasarantes9028]

Great talk! Thanks for sharing =)

[@headwayio]

Happy to help!

[@rogervezaro]

Thanks for this awesome tutorial!

[@headwayio]

You bet! Glad you found it helpful.

[@solvm1652]

super good! Excellent tut

[@headwayio]

Thank you! We appreciate the feedback.

[@iagop6078]

Awesome 👏🏻👏🏻👏🏻

[@headwayio]

We appreciate the feedback! 🤗

[@gustavo.g.pereira]

Thank you!

[@headwayio]

Happy to help!