Create drag and drop functionality in ruby on rails

Some simple steps required to create the rails application

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

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

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