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.
Feel free to ask any queries.
The first Step we required to create the Rails Application.
By using the scaffold we will generate the the MVC components needed for Simple Products application form
Create the Products database table: 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.
Then we need to set routes of our application.
In the routes.rb file then we will set the routes of our application.
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.
Then we need to run the bundle install command.
And then We need to add the following to the asset pipeline in the application.js:
We have already run the migration command our database migration command look like this.
The product model look like this
In the controller index method we only need to change one line.
Normally The view of index page always look like this we only need to change some part of code
In the Application.js file we need to add the Javascript function
Then we need to start the server.
$ rails new SampleSortRails
$ cd SampleSortRails
$ rails g scaffold Product name:string description:text quantity:integer price:integer sort:integer
$ rake db:create
$ rake db:migrate
$ 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
Rails.application.routes.draw do resources :products root 'products#index' end
gem 'jquery-rails' gem 'jquery-ui-rails' gem 'rails_sortable'
$bundle install
//= require jquery //= require jquery_ujs //= require jquery-ui/widgets/sortable //= require rails_sortable
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
class Product < ApplicationRecord include RailsSortable::Model set_sortable :sort end
class ProductsController < ApplicationController def index @products = Product.order(:sort).all end end
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 %>
$(function() { $('.sortable').railsSortable(); });
$rails s
