Forum: Ruby on Rails Simple Drag & Drop working Example Needed

Announcement (2017-05-07): is now read-only since I unfortunately do not have the time to support and maintain the forum any more. Please see and for other Rails- und Ruby-related community platforms.
Tony P. (Guest)
on 2009-01-22 11:58
Hi all,

Being a beginner in Ruby on Rails, I face issues with Drag & Drop.
Would you please give a simple working complete example for Drag and
Drop (with 2 lists)?

Or please find the below snippet and please help me find a solution.

Two draggable and droppable lists. Any item from one list should be
dropped to the other.

Note: Relevant code snippet is given below.


While dropping, the already existing items get replaced by the dropped

Reason would be – When the update_sel action is called, @selected is not
getting fetched with the old values (say, Project.find(:all, :conditions
=> "id <= 4")).


A solved method or an entirely new method for drag & drop will do.

I prefer a new complete drag and drop method to the solved code of the

Tip on the look and feel enhancement will also be very helpful.

A prompt response would be appreciated.

Code Snippet:


before_filter :get_projects, :only => [:update_all, :update_sel]

  def update_all

    render :partial =>"allproj", :object => @available


  def update_sel

    #@selected.push Project.find(:all, :conditions => "id = " +
params[:id]) #This gets error - but this needed

    @selected = Project.find(:all, :conditions => "id = " + params[:id])

    render :partial =>"selected", :object => @selected



  def get_projects

    @projects = Project.find(:all)

    @available = Project.find(:all)

    @selected = Project.find(:all, :conditions => "id <= 4") #For the
time being - later another table used




<div id="all_proj" style="border:1px solid;">

          <%= render :partial =>"allproj", :object => @available %>


<br />

<h5>Selected Projects</h5>

<div id="sel_proj" style="border:1px solid;">

          <%= render :partial =>"selected", :object => @selected %>


<%= drop_receiving_element("all_proj",

          :accept => 'sel_item',

          :url => { :action => "update_all"},

          :loading => visual_effect(:highlight),

          :complete => visual_effect(:fade),

          :update => 'all_proj') %>

<%= drop_receiving_element("sel_proj",

          :accept => 'all_item',

          :url => { :action => "update_sel"},

          :with => "'id=' + encodeURIComponent(",

          :loading => visual_effect(:highlight),

          :update => 'sel_proj') %>



          <% allproj.each do |project| %>

                   <% domid = "#{}" %>

                   <li class="all_item" id='<%= domid %>'
style="cursor:move;"><%=project.proj_name %>

                   <%= draggable_element(domid, :revert => true) %>


          <% end %>




          <% selected.each do |project| %>

                   <% domid = "#{}" %>

                   <li class="sel_item" id='<%= domid %>'
style="cursor:move;"><%=project.proj_name %>

                   <%= draggable_element(domid, :revert => true) %>


          <% end %>


Thanks & regards,
This topic is locked and can not be replied to.