# Simple Drag & Drop working Example Needed

**URL:** <https://www.ruby-forum.com/t/simple-drag-drop-working-example-needed/158347>\
**Category:** Rails\
**Created:** [January 22, 2009, 10:58am UTC](https://www.ruby-forum.com/t/simple-drag-drop-working-example-needed/158347 "2009-01-22T10:58:10Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![tnyplz](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/t/f17d59/32.png) [@tnyplz](https://www.ruby-forum.com/u/tnyplz)\
**Post date:** [January 22, 2009, 10:58am UTC](https://www.ruby-forum.com/t/simple-drag-drop-working-example-needed/158347/1 "2009-01-22T10:58:10Z")

</div>

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,