Ready to get started?

Join Adocasts Plus for $8/mo, or sign into an existing Adocasts Plus account, to get access to all of our lessons.

robot mascot smiling

Sorting Difficulties with Drag & Drop

@tomgobich
Published by
@tomgobich
In This Lesson

We'll allow our user's to customize the ordering of their difficulties via drag-and-drop using VueDraggable. When they commit a change by dropping an item, we'll persist the updated sort to our database.

Chapters

00:00 - Installing Vue Draggable
00:38 - Replacing our Unordered List with Vue Draggable
02:00 - Adding a Handle to Drag & Drop
02:42 - Testing our Drag & Drop Functionality
03:10 - Saving the New List Order on Drop
04:00 - Defining the Order Update Route Definition
04:54 - Difficulty Order Validator
05:12 - Difficulty Controller Order Route Handler
05:39 - Update Difficulty Order Action
08:36 - Testing our Drag & Drop Order Update Flow

Join the Discussion 0 comments

Create a free account to join in on the discussion
robot comment bubble

Be the first to comment!