Rails 7 #119 Trello Clone. Advanced Drag and Drop Sortable Lists with Hotwire

11 months ago
·
ruby on rails tutorial javascript drag and drop SupeRails Trello Clone hotwire drag and drop sortable lists learn ruby on rails Sortable.js in Rails Advanced Drag and Drop tutorial with source code drag and drop javascript sortable.js with hotwire rails hotwire hotwire turbo streams drag and drop functionality drag and drop with hotwire sortable hotwire

I'm so proud of this one, it should be premium content!
I've watched all the other youtube videos on this topic and I'm sure this approach is better and more versatile.

Also this video gives great insight into the thought process and debugging required to complete the feature.

Code deliverables:

  1. Sort Lists
  2. Sort tasks within List
  3. Move tasks between Lists
  4. Persist changes

This functinality was achived thanks to:

  • gem RankedModel that stores the order of items in a list
  • RequestJS that sends http requests from your javascript to your Rails controller
  • SortableJS that provides the seamless sorting functionality

Episode source code: https://github.com/corsego/119-trello-drag-drop-save/commits/main
Based on this blogpost: https://blog.corsego.com/drag-and-drop-stimulus-request-js

0:00 Preview of what we will build, other solutions
1:15 Build the boilerplate app. List has many tasks.
7:25 Install SortableJS to sort List elements in the frontend
11:20 Install gem Ranked Model to track sort order of elements
20:00 Install RequestJS to make requests to Rails controller from StimulusJS
25:45 Updating Sort order works!
26:53 Sort Tasks within a List
32:50 Sort Tasks between Lists
40:05 CSS to stack lists horizontally like Trello
41:40 Final demo. Advanced sorting works!


0
Sign in to join the conversation