Discover Our Blog

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

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'
    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
    10. The product model look like this
      class Product < ApplicationRecord
        include RailsSortable::Model
        set_sortable :sort
    11. In the controller index method we only need to change one line.
      class ProductsController < ApplicationController
        def index
          @products = Product.order(:sort).all
    12. Normally The view of index page always look like this we only need to change some part of code
          <% @products.each_with_sortable_id do |product, sortable_id| %>
            id="<%= sortable_id %>">
              <%= %>
              <%= 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() {
    14. Then we need to start the server.
      $rails s
    Feel free to ask any queries.


Leave a comment: