Simple Drag & Drop working Example Needed


#1

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.
Scenario:

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

Note: Relevant code snippet is given below.

Issue:

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

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”)).

Solution:

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
same.

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

A prompt response would be appreciated.

Code Snippet:

#Controller

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

def update_all

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

end

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

end

private

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

end

#View

#index.rhtml

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

Selected Projects
      <%= 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(element.id)",

      :loading => visual_effect(:highlight),

      :update => 'sel_proj') %>

#_allproj.rhtml

      <% allproj.each do |project| %>

               <% domid = "#{project.id}" %>

               <li class="all_item" id='<%= domid %>'

style=“cursor:move;”><%=project.proj_name %>

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

               </li>

      <% end %>

#_selected.rhtml

      <% selected.each do |project| %>

               <% domid = "#{project.id}" %>

               <li class="sel_item" id='<%= domid %>'

style=“cursor:move;”><%=project.proj_name %>

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

               </li>

      <% end %>

Thanks & regards,