Skip to main content

Subscribe to GoRails to get access to this episode and all other pro episodes, and new awesome content every month.

Subscribe Now
Only $19/month

Unlimited access. Cancel anytime.

14 Rails & Vue.js Trello Clone:

Rails & Vue.js Trello Clone - Part 4

Episode 220 · December 19, 2017

This episode we handle drag and drop of cards in their own column and also between columns in our boards

Javascript VueJS


Subscribe or login to view the transcript for this episode.



I am loving this series! This is such a cool project. The combination of acts_as_list and Vue makes it seem effortless.

I had one minor suggestion for the code in the cardMoved function. Rather than finding the list index, would it be better to just set a constant to the new list itself, and then use that object to set the list_id in the ajax request? Here's what I did:

const card_list = this.lists.find((list) => {
return => {
return ===

Then when setting up data, I did this, which seems a bit cleaner:


Thanks for the great material!


Yeah, that is true since we don't use it really anywhere else. 👍

Hi Chris, I got a similar functionality working great in the browser, but do you have any suggestions on how to test with Capybara? Before I was using jQuery UI Sortable and could test it easily with Capybara because I could execute some JavaScript to trigger the update manually. Is there a way to do this with VueDraggable?
I found a way to test both when sorting items within the same list and when moving an item to another list. In case others have the same issue you can find some details here - Thanks Chris for the excellent series!

Login or create an account to join the conversation.