_task.html.erb

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title"><%= task.title %></h3>
  </div>
  <div class="panel-body">
    <%= truncate task.description, length: 50 %>
  </div>
</div>

_task1.html.erb

<!-- adding data-id attribute -->
<div class="panel panel-default" data-id="<%= task.id %>">
  <div class="panel-heading">
    <h3 class="panel-title"><%= task.title %></h3>
  </div>
  <div class="panel-body">
    <%= truncate task.description, length: 50 %>
  </div>
</div>

application.js

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require html.sortable
//= require turbolinks
//= require_tree .

index.html.erb

<div class="row">
  <div class="col-md-5 col-md-offset-4 sortable">
    <% if @tasks.any? %>
        <%= render @tasks %>
    <% else %>
    <p>No tasks found <%= link_to "Create Task", new_task_path %></p>
    <% end %>
  </div>
</div>

routes.rb

Rails.application.routes.draw do
  root 'tasks#index'
  resources :tasks do
    put :sort, on: :collection
  end
end

task.rb

class Task < ActiveRecord::Base
  validates_presence_of :title, :description

  default_scope { order("priority ASC") }
end

tasks.css.scss

.sortable-placeholder {
  border: 1px dashed #CCC;
  background-color: #f9f9f9;
  height: 80px;
  margin-bottom: 10px;
}

.sortable {
  display: list-item;
}

tasks.js

var ready;
ready = function(){
    // call sortable on our div with the sortable class
    $('.sortable').sortable();
}

$(document).ready(ready);
/**
 * if using turbolinks
 */
$(document).on('page:load', ready);

tasks1.js

var ready, set_positions;

set_positions = function(){
    // loop through and give each task a data-pos
    // attribute that holds its position in the DOM
    $('.panel.panel-default').each(function(i){
        $(this).attr("data-pos",i+1);
    });
}

ready = function(){

    // call set_positions function
    set_positions();
    
    $('.sortable').sortable();
}

$(document).ready(ready);
/**
 * if using turbolinks
 */
$(document).on('page:load', ready);

tasks2.js

var ready, set_positions;

set_positions = function(){
    // loop through and give each task a data-pos
    // attribute that holds its position in the DOM
    $('.panel.panel-default').each(function(i){
        $(this).attr("data-pos",i+1);
    });
}

ready = function(){

    // call set_positions function
    set_positions();

    $('.sortable').sortable();

    // after the order changes
    $('.sortable').sortable().bind('sortupdate', function(e, ui) {
        // array to store new order
        updated_order = []
        // set the updated positions
        set_positions();

        // populate the updated_order array with the new task positions
        $('.panel.panel-default').each(function(i){
            updated_order.push({ id: $(this).data("id"), position: i+1 });
        });

        // send the updated order via ajax
        $.ajax({
            type: "PUT",
            url: '/tasks/sort',
            data: { order: updated_order }
        });
    });
}

$(document).ready(ready);
/**
 * if using turbolinks
 */
$(document).on('page:load', ready);

tasks_controller.rb

class TasksController < ApplicationController
  # index, new, create, show actions

  def sort
    params[:order].each do |key,value|
      Task.find(value[:id]).update_attribute(:priority,value[:position])
    end
    render :nothing => true
  end

  # more code
end