Drag and Drop Sortable Lists in Ruby on Rails

► Check out gorails.com for Pro episodes and more!
► SaaS business template for Ruby on Rails with built-in features like Payments, Teams, and much more: jumpstartrails.com
► Ruby on Rails hosting with Hatchbox.io: hatchbox.io
► Learn how to add Stripe Payments (with SCA support!) with Ruby on Rails: courses.gorails.com/payments-...

[@julianpinzoneslava]

I’m loving the episodes where you use Stimulus. I think is SO important for someone to demystify it and I’m glad you’re doing it. Keep ‘em coming man! They’re amazing!

[@GorailsTV]

And it's always surprisingly simple it seems. I just built a trello clone in like 25 lines of code. It's kinda crazy. Will be publishing that soon.

[@MassimoDeMarchiyolo]

@@GorailsTV Is the Trello clone video published anywhere?

[@carlosmorin1923]

Very useful, thanks!

[@devonkiss]

Fantastic video, maybe I missed it or maybe I didn't, either way, in drag_controller.js you must have an import for Rails... so: import Rails from '@rails/ujs' -- if you get Rails is not defined error. Thank you.

[@IvanRaszl]

Awesome as always! Thanks!

[@GorailsTV]

🤘

[@mikopiko]

This is Amazing!

[@mouhamaddiop1144]

Very very usefull. Thanks a lot

[@inmydelorean6025]

Thanks for the tutorial Chris, it's great. But I think this implementation will fail for all but trivial scenarios. Assigning position value to an item based on its position in the list will work for the newly created untouched list but let's say I have a list of 15 todos. I've completed most of them and left with tasks 5 (first), 10 (second), 15 (third). Now, when I move task 5 to the bottom of the list it will be assigned with the position of 3 since it's third now. But tasks 10 and 15 have corresponding position values and will stay in the second and third positions. The only way to move task 5 to the third position in the list is to move tasks 10 and 15 up so that they are assigned with positions 1 and 2. There are other issues but it's a simple one. It will also fail when different users manage their to-do lists, they will be overriding each other's tasks positions. I still think it's a great tutorial overall, just wanted to warn anyone who'd like to implement it in production.

[@bhaktikulkarni5089]

I'm a newbie in ruby on rails. I have two controllers for the same model in index page of both of these controllers we can reorder. I want different ordering systems in both. Meaning postion for one controller and maybe other_position for the other controller. Is this possible?

[@ShadabAli-gs3eo]

There is any way to do the same with react and material UI? @GoRails

[@josephcaughlin588]

Do you have any suggestions for a sortable card-grid. SortableJS has a grid example on their page, but I can't find any documentation to see how they achieved that. I am using CSS-Grids to create a responsive card grid, but when I add the data-controller, my grid is rendered as a list. I am not seeing anything in the inspector to indicate what is happening.

[@GorailsTV]

It might just be CSS? Your elements probably need to be all inline blocks

[@josephcaughlin588]

@@GorailsTV I reverted to bootstrap. This ugly line of html fixed it: . That fixed it. I can say I tried to do about everything. The data-controller has to be in the div immediately preceding the element that one wants to sort? For what ever reason, putting on its one line causes some sort of conflict. I tried to add an attribute class.
Now, I get to the fun part which is to make sure I can get this to persist with my many-to-many table.

[@SouravTechLabs]

Why on `Rails.ajax({...})` am I getting ReferenceError: Rails is not defined?

[@M3lfQuin]

import Rails from "@rails/ujs"

[@dp2586]

Where is the nested sortable episode ?

[@vncntc8165]

Hello rails newbie here.
Which do you think would be better to use between jquery-ui sortable and this?

[@GorailsTV]

Nothing wrong with using jQuery! This is more flexible to use your own design though.

[@BrazenNL]

Where are the classes like mb-4 defined that I see you using regularly?

[@GorailsTV]

In Bootstrap and Tailwind

[@withrejkapermana6087]

can you put your rails version sir?

[@GorailsTV]

Rails 6

[@YaroslavShmarov]

but why stimulus? can't we just use plain javascript for it?

[@GorailsTV]

Stimulus makes it so we don't have to do any fancy turbolinks compatibility. Check out our other episodes on Stimulus.

[@yanikcrepeau485]

Everything when fine on my side until I have the following error messge (ruby on rails console):
ActionController::InvalidAuthenticityToken (Can't verify CSRF token authenticity.):

[@ellyambet4608]

Awesome video Chris. Since: Rails.ajax ({
url: this.data.get("url").replace(":id", id),
type: 'PATCH',
data: data
}) Depends on, @rails/ujs, This other option works for me without importing, @rails/ujs. ----> end(event) {
const id = event.item.dataset.id;
const data = new FormData();
data.append("position", event.newIndex + 1);
fetch(this.data.get("url").replace(":id", id), {
method: 'PATCH',
headers: {
'X-CSRF-Token': document.getElementsByName('csrf-token')[0].content,
'Content-Type': 'application/json',
},
body: JSON.stringify(Object.fromEntries(data)),
});
}

[@ttovarischh]

Hi! Thank you so much for your videos!!! You are an incredible teacher. I am somehow getting the error "PATCH localhost:3000/events/6/move 404 (Not Found)" each time I move an item. Do you know why? :(((