As In the current Technology world Every one wants the dynamic feature in there website in day to dy use

So We will learn today

How to Add dynamic Drag And Drop Feature In Ruby On Rails?

We Will Create a Sample App For the same

• Create a New Rails DragDropApp

$ rails new DragDropApp

•  Then We will Create A Item Module In The application By using Below Command

​$ rails g scaffold Item title:string body:text

Note: The above command will create All the files required For Item Module(Model View Controller), Then Run Below Command

$ rails db:create db:migrate

• Update the routes.rb File

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

Now The sample Application is ready Now You can Run $ rails s and check your application then add some sample Items

• From Here the actual Drag and Drop Feature started add Below Line in your Gemfile

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

After Adding the Gem Run Bundle Install

$bundle install

• Then Include The required Javascripts File in application.js

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

• Update the item.rb Model File.

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

• Update The items_controller.rb File

class ItemsController < ApplicationController
  def index
    @items = Item.order(:sort).all
  end
end

• The Final and Main Page Need to update the items/index.html.erb     

<table>
  <tbody class="sortable">  <!-- sortable target -->
    <% @items.each_with_sortable_id do |item, sortable_id| %>
      <tr id="<%= sortable_id %>">  <!-- Needs id tag on sorting elements -->
        <td><%= item.title %></td>
        <td><%= item.sort %></td>
        <td><%= link_to 'Show', item %></td>
        <td><%= link_to 'Edit', edit_item_path(item) %></td>
        <td><%= link_to 'Destroy', item, method: :delete, data: { confirm: 'Are you sure?' } %></td>
      </tr>
    <% end %>
  </tbody>
</table>

• Final Step and You can check the Below Sample

Update application.js

 

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

Then start You rails application

$ rails s