Sortable Drag and Drop Discussion

Justin Miller September 19, 2017 5:15pm

Just a heads up, in your Gemfile, bootstrap 4 beta no longer uses tether for tooltips, now uses popper.js which is now a dependency of the bootstrap 4 gem

Chris Oliver September 19, 2017 5:19pm

Yeah! Popper is nice to have instead. Screencast was using an old version of my Rails template which has been updated already, just hadn't done a git pull recently on that machine. Should update that in the repo.

Frank Vinci September 19, 2017 5:41pm

I'd love to see you go further into this topic with Vuejs!

Jacqueline Chenault September 19, 2017 5:45pm

I'd DEFINITELY be interested in the Vuejs version - I've got an app in mind that it would be very helpful for...

Alex Musayev September 21, 2017 2:23pm

This approach for updating reordered records will produce O(n) queries. If you use Postgres, it is possible to do the same operation with a single update: https://stackoverflow.com/a... The only disadvantage here is that ActiveRecord can't do queries like this (correct me if I'm wrong), so it will take direct SQL execution.

Liam Smith September 22, 2017 4:58am

+1 for VueJS as well

David Van Der Beek February 4, 2018 8:20pm

Here's another implementation that avoids excess queries and lets you use the standard update controller action. It uses the insert_at method that acts_as_list provides to move the item within the list:

https://gist.github.com/dva...

# app/models/question.rb
def new_position=(position)
insert_at(position.to_i)
end

Make sure to add :new_position to permitted params in questions controller

# coffeescript
$(document).on 'turbolinks:load', ->
$('.sortable').sortable
axis: 'y'
handle: '.handle'
update: (e, ui) ->
data = new FormData
data.append "question[new_position]", ui.item.index() + 1
Rails.ajax
url: "/questions/#{ui.item.data('question-id')}"
type: "PATCH"
data: data

April February 21, 2018 12:01am

Thank you this was an awesome tutorial, will definitely be watching more from you!!

Joel C March 23, 2018 9:02pm

A few pretty basic observations/questions:

(1) When I use:

Rails.ajax

nothing hits the server after the drag/drop is complete.

I changed to:

$.ajax

and that fixed the problem. Any ideas why the former did not work and the latter did?

(2) Instead of

//= require jquery-ui/widget
//= require jquery-ui/sortable

I needed to use

//= require jquery-ui/widgets/sortable

to avoid an error message. I suspect this has something to do with either (a) a new version of jquery-ui or (b) my lack of understanding of the asset pipeline.

(3) My implementation required me to the skip authenticity token on the sort method with:

skip_before_action :verify_authenticity_token, only: [:sort]

How does the code in this tutorial work without skipping the authenticity token verification?

Thanks, as always, for such wonderful tutorials!

Chris Oliver March 23, 2018 9:09pm

Thanks Joel!

Some answers to your questions (not exactly in order):

1. Rails.ajax is the new replacement for jquery's ajax ($.ajax) now that Rails no longer comes with jQuery. Rails.ajax is also smart enough to include the authenticity token in every request which is why you don't have to do #3.

3. For your code, you should include the authenticity token in the request instead of disabling the check as you'll open yourself up to security vulnerabilities by turning it off.

2. jQuery-ui may have moved sortable to the widgets folder since I recorded the episode. Things are always changing so you'll often run into little changes like that.

Joel C March 27, 2018 6:15pm

Thanks, Chris. Strangely, Rails.ajax doesn't fire an ajax request for me even though $.ajax works fine. I'm using Rails 5.1.5 and I've confirmed the rails-ujs file is included. Good to know about the authenticity token being included in every request with Rails.ajax.

JoaoQuaresma May 1, 2018 7:21pm

hey guys thank you both, Joel your comment helped me to solve my problem. And Chris, man I love what you're doing, I started to learn Ruby and Rails some months ago and you already helped me a lot with your tutorials. What you're doing is something that money cant pay honestly. Keep going

Analia Alvar March 25, 2019 11:04pm

The same was happening to me when using Rails.ajax(), I found this online and now it works:
$("#sections").sortable({
update: function(e, ui) {
Rails.ajax({
dataType: 'script',
url: $(this).data("url"),
type: "PATCH",
beforeSend: function() {
return true
},
data: $(this).sortable('serialize'),
});
}
});

Seph Cordovano April 9, 2018 2:40am

Would love to see a Trello clone!

Chris Oliver April 9, 2018 2:50am

Hey Seph! I did a whole series on it here: https://gorails.com/series/vuejs-trello-clone-in-rails

Hope you enjoy it!

Vito Botta May 21, 2018 6:42pm

Hi Chris, I would need to be able to sort items in a list as you've shown in this episode, but also move items between linked lists. How would you implement this? Problem is that in this case I need to remove the item from the old list and add it to the new list, besides updating the positions, and the new positions should be correct in both lists without leaving gaps in any of them. So I guess the serialize trick and just updating positions in batch in the controller would not be enough? I also noticed that when you move an item from a list to another, jQuery UI Sortable triggers two update events, one for the source list and the other for the destination list. Thanks a lot in advance for your help!

Vito Botta May 21, 2018 7:07pm

Update: actually... it seems to work just fine. The two requests update the two lists correctly with no other changes. Thanks! :)

Vito Botta May 21, 2018 7:20pm

Another question.... how would you go about testing sorting with Capybara/system tests? Thanks

Daniel Boakye July 29, 2018 5:46am

If you know you are not going to respond to our questions, why do you keep the comment session on the blog?

Liz Bayardelle October 20, 2018 8:42pm

Hi Chris,

This is such a useful video! With a little help from your friendly neighborhood GoRails Slack channel I got it (mostly) working, but for some reason it's not serializing correctly. According to my server log, it is sending PATCH data to the database:

Started PATCH "/tasks/sort" for 127.0.0.1 at 2018-10-20 11:16:06 -0700
Processing by TasksController#sort as */*
  Parameters: {"task"=>["2", "8"]}
  User Load (0.2ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = ? ORDER BY "users"."id" ASC LIMIT ?  [["id", 1], ["LIMIT", 1]]
  ↳ /Users/lizbayardelle/.rvm/gems/ruby-2.5.0/gems/activerecord-5.2.1/lib/active_record/log_subscriber.rb:98
  Task Update All (0.2ms)  UPDATE "tasks" SET "position" = 1 WHERE "tasks"."id" = ?  [["id", 2]]
  ↳ app/controllers/tasks_controller.rb:27
  Task Update All (0.1ms)  UPDATE "tasks" SET "position" = 2 WHERE "tasks"."id" = ?  [["id", 8]]
  ↳ app/controllers/tasks_controller.rb:27
Completed 200 OK in 3ms (ActiveRecord: 0.5ms)

But for some reason it always stays the original order on refresh. Any hints as to what could be going wrong?

The only difference between my app and the example app is that I had to have the .sortable act on a class (.taskWrapper not #taskWrapper) because I have the tasks in a partial that's being rendered more than one place on the page. Could that be affecting it?

Anton January 24, 2019 9:09am

How to make it work with Mango?

Manuel Lorenzo May 10, 2019 9:10am

I can't make it work with serialize: I see the only params sent to my controller are {"controller"=>"tasks", "action"=>"sort"}

Hassan Mccutchen June 14, 2019 5:03pm

After following along to the end of the video, I stil couldn't get my records(feature_package to update, the params getting passed were Parameters: {"packaged_feature"=>["321", "1"], "id"=>"sort"}, apparently because of the PATCH request it was looking for a specific record id automatically and changing this to a POST in my ajax request and my routes file worked for me.

Wilson Horrell September 19, 2019 5:36pm

Man, that was super-tight. Thank you so much. Really awesome!

Jaymarc L. San Luis November 7, 2019 4:34am

Hi Sir,

Good day!
Can we implement this using Rails 6 webpack?

will November 8, 2019 2:49pm

plus 1 for this.

will November 8, 2019 3:10pm

Hay Jaymarc,

run
yarn add jquery-ui

then in your javascript/packs/application.js

require("jquery-ui/ui/widget")
require("jquery-ui/ui/widgets/sortable")

$(document).on("turbolinks:load", () => {
  $("#questions").sortable({
    update: function(e, ui) {
      Rails.ajax({
        url: $(this).data("url"),
        type: "PATCH",
        data: $(this).sortable('serialize'),
      });
    }
  });
})

... and the rest is the same as the tutorial, minus all ui gem. hth

Gus P February 5, 2020 2:22am

I get

Uncaught TypeError: $(...).sortable is not a function

yarn add jquery-ui

application.js

require('jquery')
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require('owl.carousel')
require('isotope-layout')
require('packs/redactor.min')
require('packs/filemanager.min')
require('packs/imagemanager.min')
require("jquery-ui/ui/widget")
require("jquery-ui/ui/widgets/sortable")

var jQueryBridget = require('jquery-bridget');
var Isotope = require('isotope-layout');

jQueryBridget( 'isotope', Isotope, $ );


  $(document).on("turbolinks:load", () => {
    $("#document_list").sortable({
      update: function(e, ui) {
        Rails.ajax({
          url:$(this).data('url'),
          type: "PATCH",
          data: $(this).sortable('serialize'),
        });
      }
    });
  })

enviroment.js

 const { environment } = require('@rails/webpacker')

const webpack = require('webpack')
environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery',
    jquery: 'jquery/src/jquery'
  })

)

module.exports = environment