Sortable

application.js

//= require jquery
//= require jquery_ujs
//= require jquery.ui.sortable
//= require sortable

list.html.haml

%ul.sortable{:"data-update-url" => mass_update_order_api_partners_path}
  - @partners.each do |p|
    %li{data: {id: p.id}}
      = link_to p.url do
        = image_tag p.image.url, alt: p.name

nested_lists.html.haml

%ul.thumbnails.columns
  - Partner::Group::COLUMN_VALUES.each do |i|
    %li.span3{data: {id: i}}
      %ul.thumbnails.sortable{:"data-update-url" => mass_update_order_api_partner_groups_path}
        - partner_groups_with_column(i).each do |group|
          %li.span3{data: {id: group.id}}
            .well
              %h5= group.name
              %hr
              %ul.nav.nav-tabs.nav-stacked.sortable{:'data-update-url' => mass_update_order_at_api_partners_path}
                - group.partners.asc_by_order_at.each do |partner|
                  %li{data: {id: partner.id}}
                    = partner.name

partner_groups_controller.rb

class Api::PartnerGroupsController < Api::ApplicationController
  def mass_update_order
    group_ids = params[:ids].map(&:to_i)
    group_at = params[:group].to_i
    groups = Partner::Group.find(group_ids)

    groups.each do |g|
      ord = group_ids.index(g.id)
      g.order_at = ord
      g.group_at = group_at
      g.save
    end

    head :ok
  end
end

partners_controller.rb

class Api::PartnersController < Api::ApplicationController
  def mass_update_order
    partner_ids = params[:ids]
    partners = Partner.find(partner_ids)
    group = Partner::Group.find_by_id(params[:group])

    partner_ids.map!(&:to_i);

    partners.each do |partner|
      order = partner_ids.index(partner.id)
      partner.group = group
      partner.order_at = order
      partner.save
    end

    head :ok
  end
end

routes.rb

MyApp::Application.routes.draw do
  ...
  namespace :api do
    resources :partners, only: [] do
      collection do
        put :mass_update_order
      end
    end

    resources :partner_groups, only: [] do
      collection do
        put :mass_update_order
      end
    end
  end
end

sortable.js

  $('.sortable').each(function() {

    var connectClass = '.' + $(this).attr('class').replace(/\s/g, '.');

    $(this).sortable({

      helper: function(e, ui) {
        ui.children().each(function() {
          $(this).width($(this).width());
        });
        return ui;
      },
      connectWith: connectClass,
      update: function(e, ui) {
        var ids = [],
          cont = ui.item.closest('ul, tbody'),
          url = cont.attr('data-update-url'),
          group = cont.closest('li, tr').attr('data-id')
        ;

        cont.children().each(function() {
          var id = $(this).attr('data-id'); 
          ids.push(id);
        });

        $.ajax({
          type: "post",
          url: url,
          data: {
            group: group,
            ids: ids,
            _method: 'put'
          },
          dataType: 'json'
        });
      }
    })
  });

table.html.haml

%table.table.table-striped
  %thead
    %tr
      %th= Partner.human_attribute_name :name
      %th= Partner.human_attribute_name :url

  %tbody.sortable{:"data-update-url" => mass_update_order_api_partners_path}
    - @partners.each do |p|
      %tr{data: {id: p.id}}
        %td= p.name
        %td= link_to p.url, p.url, target: :_blank