# Extending the Rails Recipies sortable list example to includ

**URL:** <https://www.ruby-forum.com/t/extending-the-rails-recipies-sortable-list-example-to-includ/106507>\
**Category:** Rails\
**Created:** [June 11, 2007, 1:05pm UTC](https://www.ruby-forum.com/t/extending-the-rails-recipies-sortable-list-example-to-includ/106507 "2007-06-11T13:05:37Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![etikette](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/e/43a26b/32.png) [@etikette](https://www.ruby-forum.com/u/etikette)\
**Post date:** [June 11, 2007, 1:05pm UTC](https://www.ruby-forum.com/t/extending-the-rails-recipies-sortable-list-example-to-includ/106507/1 "2007-06-11T13:05:37Z")

</div>

Hi all

I have a site design with 3 sortable lists on the same page. i want to  
be able to drag my

- s between 
s if that makes sense. how can i  
change the example code to do this:

controller:

class GroceryListController \< ApplicationController  
layout “standard”

def show  
@grocery\_list = GroceryList.find(params[:id])  
end

# …

def sort  
@grocery\_list = GroceryList.find(params[:id])  
@grocery\_list.food\_items.each do |food\_item|  
food\_item.position = params[‘grocery-  
list’].index(food\_item.id.to\_s) + 1  
food\_item.save  
end  
render :nothing =\> true  
end

end

view:

## \<%= @grocery\_list.person.name %\>'s Grocery List

### \<%= @grocery\_list.name %\>

 \<% @grocery\_list.food\_items.each do |food\_item| %\> - \<%= food\_item.quantity %\> units of \<%= food\_item.name %\> 
 \<% end %\>

\<%= sortable\_element ‘grocery-list’,  
:url =\> { :action =\> “sort”, :id =\> @grocery\_list },  
:complete =\> visual\_effect(:highlight, ‘grocery-list’)  
%\>

---

<div class="post-metadata">

**Author:** ![etikette](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/e/43a26b/32.png) [@etikette](https://www.ruby-forum.com/u/etikette)\
**Post date:** [June 11, 2007, 6:30pm UTC](https://www.ruby-forum.com/t/extending-the-rails-recipies-sortable-list-example-to-includ/106507/2 "2007-06-11T18:30:50Z")

</div>

Doesn’t anyone know a tutorial for this?

Marc