Rails 7
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: github.com/corsego/119-trello...
Based on this blogpost: blog.corsego.com/drag-and-dro...
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!
Пікірлер: 33
I know this video is a year old, but I want to thank you anyway. You saved me a lot of time and frustration.
@SupeRails
Ай бұрын
Hi! I’m glad you found this video useful☺️ I think it will be relevant for a few more years. Currently there is no better approach with rails/hotwire
I just found your page and gave this video a watch. You helped me so much, thank you!
Thank you so much! immediately subbed after it worked. I've been looking for a way to implement drag and drop since all my tutorials are out of date. You're my savior! I can continue my study path because of you 🙏🙌
@SupeRails
8 ай бұрын
Glad to know that it helped you!
Absolutely awesome video - you are a natural teacher. Huge thanks for this! Please keep them coming!
Your videos are always helpful than others
@SupeRails
8 ай бұрын
Thanks for the kind words!
Amazing video! Thank you so much! Immediately subbed! :)
just made the repository public! check it out here: github.com/corsego/119-trello-drag-drop-save/commits/main
Always enjoy learning Rails from your videos! Thank you
@SupeRails
Жыл бұрын
My pleasure!
@mariners_platter
Жыл бұрын
@@SupeRails I visited your Courses page today, and saw that your courses are Rails 6. Any chance you will post a Rails 7 course in the near future?
Thanks for taking the time to research and build this! Just subscribed!
You are great Yaro...!!
Thanks for to this. I fully understand now.
Thanks for sharing this. Really appreciate it. 👍
@SupeRails
8 ай бұрын
My pleasure!
Thank you! I'm amazed how many videos you have. Like and sub!
I'm not sure about the ranked_model gem as the acts_as_sortable seems to be more up-to-date. Can you elaborate a bit more about this choice?
Thank you so much, I love your videos!!!
interesting to watch. thanks for sharing
@SupeRails
Жыл бұрын
Glad you enjoyed it
Very useful
Very informative 👏
Thanks a lot ! Very useful !
@SupeRails
Жыл бұрын
Glad to hear that!
Great work ❤❤
@SupeRails
Жыл бұрын
Thanks ✌️
Great!
This video is very helpful for one of my ongoing project thank you for this video. I want to do 1 thing that is when you are dropping element so I have few restriction based on that I will check that you can drop there or not. So could you please provide how to cancel draggable item in sortableJs so that draggable item will automatically go back to previous position. Thank you. ( note: in jquery-ui sortable we can use $(".sub-tickets, .sub-card").sortable("cancel"); but don't know what should use in sortableJs )
Please present wife for kiss.
@SupeRails
8 ай бұрын
what?