Ready to get started?

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

robot mascot smiling

Sorting Difficulties with Drag & Drop

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.

Published
Nov 22
Duration
9m 21s

Developer, dog lover, and burrito eater. Currently teaching AdonisJS, a fully featured NodeJS framework, and running Adocasts where I post new lessons weekly. Professionally, I work with JavaScript, .Net C#, and SQL Server.

Adocasts

Burlington, KY

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

Ready to get started?

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

Join The Discussion! (0 Comments)

Please sign in or sign up for free to join in on the dicussion.

robot comment bubble

Be the first to Comment!