How to create Drag and Drop functionality in Ruby On Rails?

I have seen many developers that are looking for creating "Drag and Drop" functionality in Ruby On Rails technology. So I'm going to brief about a sample to create and implement this functionality using JQuery Rails, JQuery UI Rails and Rails Sortable gems. Given below are simple steps required to create the rails application:

Ruby On Rails Programming

How to create Drag and Drop functionality in Ruby on Rails?

First of all we will create a simple application first to create the products.

1. The first Step we required to create the Rails Application.

   $ rails new SampleSortRails

2. By using the scaffold we will generate the the MVC components needed for Simple Products application form

   $ cd SampleSortRails

   $ rails g scaffold Product name:string description:text quantity:integer price:integer sort:integer

3. Create the Products database table:

    $ rake db:create

   $ rake db:migrate

   Rails uses rake commands to run migrations. Migrations are Ruby classes that are designed to make it simple to create and modify database tables. Rails uses rake commands to run migrations.
4. Then we need to set routes of our application.

   $ rake routes
        Prefix Verb   URI Pattern                  Controller#Action
           products GET    /products(.:format)          products#index
                    POST   /products(.:format)          products#create
        new_product GET    /products/new(.:format)      products#new
       edit_product GET    /products/:id/edit(.:format) products#edit
            product GET    /products/:id(.:format)      products#show
                    PATCH  /products/:id(.:format)      products#update
                    PUT    /products/:id(.:format)      products#update
                    DELETE /products/:id(.:format)      products#destroy
               root GET    /                            products#index
   sortable_reorder POST   /sortable/reorder(.:format)  sortable#reorder

5. In the routes.rb file then we will set the routes of our application.

   Rails.application.routes.draw do
     resources :products
     root 'products#index'
   end
   

6. We have made the simple application for products CRUD operation for adding the Drag and drop functionality in the Application we need to follow some steps and need to do Setup .
   First of all we need to add the gem files in the application in the gem file.

   gem 'jquery-rails'
   gem 'jquery-ui-rails'
   gem 'rails_sortable'

7. Then we need to run the bundle install command.

    $bundle install

8. And then We need to add the following to the asset pipeline in the application.js:

   //= require jquery
   //= require jquery_ujs
   //= require jquery-ui/widgets/sortable
   //= require rails_sortable

9. We have already run the migration command our database migration command look like this.

   class CreateProducts < ActiveRecord::Migration[5.1]
     def change
       create_table :products do |t|
         t.string :name
         t.text :description
         t.integer :quantity
         t.integer :price
         t.integer :sort
   
         t.timestamps
       end
     end
   end
   

10. The product model look like this

    class Product < ApplicationRecord
      include RailsSortable::Model
      set_sortable :sort
    end
    

11. In the controller index method we only need to change one line.

    class ProductsController < ApplicationController
      def index
        @products = Product.order(:sort).all
      end
    end

12. Normally The view of index page always look like this we only need to change some part of code

    class="sortable">
        <% @products.each_with_sortable_id do |product, sortable_id| %>
          id="<%= sortable_id %>">
            <%= product.name %>
            <%= product.description %>
            <%= product.quantity %>
            <%= product.price %>
            <%= product.sort %>
            <%= link_to 'Show', product %>
            <%= link_to 'Edit', edit_product_path(product) %>
            <%= link_to 'Destroy', product, method: :delete, data: { confirm: 'Are you sure?' } %>
            
          <% end %>
        
      

13. In the Application.js file we need to add the Javascript function

    $(function() {
      $('.sortable').railsSortable();
    });

14. Then we need to start the server.

    $rails s

Feel free to ask any queries.
Source: http://www.cryptextechnologies.com/blogs/how-to-create-drag-and-drop-functionality-in-ruby-on-rails