This device is not compatible.
PROJECT
Create Drag and Drop Web Components by Using Phoenix LiveView
Learn to use Phoenix LiveView to implement a drag and drop feature in your web applications. This project uses hooks to ensure that the client-side drag and drop data is available at the server-side LiveView. The data modifications done by the client are available at the server end in real-time.
You will learn to:
Create interactive web applications using Phoenix LiveView.
Develop a real-time application using Elixir.
Handle events in real-time.
Use hooks for event handling.
Skills
Functional Programming
Web Frameworks
Real-time Event Handling
Interactive Real-time Web Applications
Prerequisites
Basic understanding of Elixir
Basic understanding of Phoenix LiveView
Basic understanding of MVC architecture
Technologies
Elixir
Phoenix
JavaScript
Project Description
The Phoenix LiveView library allows users to build highly interactive applications. It provides rich, real-time user experiences with server-rendered HTML. LiveView programming uses a declarative model. It keeps track of all the changes and allows the users to write their code as any other server-rendered HTML.
In the first part of the project, we’ll use Phoenix LiveView to create a basic e-learning website. Then we’ll implement a learning plan feature to enable users to drag and drop different courses into a group. This will allow the user to drag courses from the initial pool of courses and drop them in a drop zone. In the end, they’ll be able to see and follow their customized learning plan. The data dragged and dropped at the front end will be available on the server-side as well.
Project Tasks
1
Setup and Configuration
Task 0: Get Started
Task 1: Initial Setup
2
Drag and Drop
Task 2: Assign Values to the Socket
Task 3: Create a Drop Zone
Task 4: Update the Template
Task 5: Add Hooks
3
Event Handler
Task 6: Add an Event Handler
Task 7: Find the Drop Zone
Task 8: Update Assigns on Drop
Task 9: Run the Application
Task 10: Add a Button Click Event Handler
Congratulations!
Relevant Courses
Use the following content to review prerequisites or explore specific concepts in detail.