Drag and Drop Sorting With Livewire

6 episodes 22 mins

Overview

Easily add drag and drop sorting functionality to your Livewire components with an Alpine directive, powered by Sortable.js.

We’ll start with a list of ordered items, activate drag and drop sorting, and then feed the new order back to Livewire to instantly update the database.

Once you’re done, you’ll be able to reuse this functionality in any of your Livewire components.

Alex Garrett-Smith
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Related courses

Livewire
Learn Livewire

Ready to learn Livewire? Throughout this course, we’ll build up a real application that touches almost every aspect of Livewire — leaving you ready to start building your own applications.

25 episodes
2 hrs 52 mins
Livewire
Build an Appointment Booking System With Livewire

Building an availability calendar and booking system is a notoriously difficult problem to solve. That’s exactly what we’re going to cover in this course. Step by step, we’ll build an appointment slot generator that calculates availability based on employee schedules, employee’s booked time off, the length of service chosen, existing appointments, and cancelled appointments. For maximum flexibility, we’ll also allow multi-employee availability checks, so we’ll be able to see every employee who can perform a service (and their available slots). To finish up, we’ll create an entire booking flow with Livewire, including a beautiful booking calendar that shows detailed availability across multiple dates, the ability to choose a time slot — and finally the ability to book an appointment. Phew. We’ve got a lot to learn — let’s build a booking system with Livewire!

36 episodes
3 hrs 4 mins
Livewire
Building Modals in Livewire

Build your own modal functionality in Livewire, completely from scratch! We’ll cover creating a re-usable modal wrapper, transitions, triggering modals from anywhere with our own Alpine functionality, trapping focus inside modals, layering modals correctly, and more.

11 episodes
1 hr 1 min
Livewire
Crop and Upload Profile Photos with Livewire

Using Livewire, Alpine and Cropper.js (or any cropping library), we’ll create an embeddable form field for users (or any other model) to upload profile photos. The form element will launch a modal, where users can crop and adjust their profile photo, before being able to preview and save the cropped image — or clear everything out and start again. You’ll learn: - How to launch modals in Livewire - How to use Cropper.js with Alpine - How to resize images on the backend with the spatie/image package - How to pass data between Livewire components

10 episodes
43 mins