From WhyNotWiki

Contents 1 Introduction 2 The simplest Ajax request (good for debugging) 3 [Troubleshooting (category)] The drag and drop is working, except it's not making any Ajax request! 4 Reference for Scriptaculous 5 6 The sort / update method of the controller 7 Drag-and-drop between sortable lists 8 Rails / Sortable trees 8.1 8.2 Scriptaculous's Sortable's tree:true option 8.3 Sur's AjaxTree 8.4 Sortable tree addition / discussion on Rails-spinoffs list 8.5 sortable tree fix and enhancement for acts_as_nested_set+better_nested_set plugin

[edit] Introduction

This is about making lists/trees that you can reorder by dragging and dropping. Using Scriptaculous and Ajax.

[edit] The simplest Ajax request (good for debugging)

<%= sortable_element :menu,
      :url => { :action => 'inspect_params' },
      :complete => "alert(request.responseText);" %>
%>

class _Controller < ApplicationController
  ...
  def inspect_params
    render :text => params.inspect
  end
end

[edit] [Troubleshooting (category)] The drag and drop is working, except it's not making any Ajax request!

Do your list items have ids? They must have ids (for example, node_1, node_2, ...) or it will silently fail to work.

Why does it need the ids? So that it can submit the list of IDs (in order, since the whole reason you made your list sortable was so that you can use drag and drop to reorder the items), sort of like this:

  Parameters: {"list"=>["1", "3", "2"], "action"=>"inspect_params", "controller"=>"task_tree"}

The IDs that are submitted to the Ajax action are extracted from the IDs of the li elements in the list.

[edit] Reference for Scriptaculous

This isn't Rails-specific, but here it is...

http://wiki.script.aculo.us/scriptaculous/show/SortableListsDemo Sortable Lists Demo in scriptaculous wiki

http://wiki.script.aculo.us/scriptaculous/show/GhostlySortableDemo Ghostly Sortable Demo in scriptaculous wiki

[edit]

Rails Recipes book

...

HowToUseDragAndDropSorting in Ruby on Rails (http://wiki.rubyonrails.org/rails/pages/HowToUseDragAndDropSorting). Retrieved on 2007-05-11 11:18.

logicnazi,

Also I think sortables have some issues if you try and update the sortable list while the list is working. You may wish to stop sortables (with Sortable.dstroy) before updating the list and then restrart it.

[edit] The sort / update method of the controller

HowToUseDragAndDropSorting in Ruby on Rails (http://wiki.rubyonrails.org/rails/pages/HowToUseDragAndDropSorting). Retrieved on 2007-05-11 11:18.

def update_positions
  params[:sortable_list].each_index do |i|
    item = ListItem.find(params[:sortable_list][i])
    item.position = i
    item.save
  end
  @list = List.find(:all, :order => 'position')    
  render :layout => false, :action => :list
end

def update_positions
  params[:sortable_list].each_with_index do |id, position|
    ListItem.update(id, :position => position)
  end
  render :nothing => true
end

Rails Recipes book, p. 24

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

[edit] Drag-and-drop between sortable lists

How to implement drag-and-drop between sortable lists with Rails at Hans Friedrich (http://blog.hansfriedrich.com/?p=4). Retrieved on 2007-05-11 11:18.

A recent project required the use of not just one but TWO drag-and-drop sortable lists on the same page. The lists are used for sorting a set of names into left and right columns, and then sorting them in arbitrary order within those columns.

...

The difficulty is that although dragging and sorting in the browser works great, our Rails action “sort” doesn’t know what to do with itself now. All of a sudden items are coming and going instead of just presenting themselves for a simple reordering like they used to.

The problem stems from approaching sorting by matching up items from a single list to their new positions provided by a array of values in params[’your-list-id’]. Because a new item could be introduced at any time, the @yourlist.funky_items collection in our example is now an unreliable source of knowledge about what should and should not be in a list. We need to start giving more action to the array we’re getting with our Ajax call - the items in that array give us the real man-on-the-street picture of what items our list should have.

Rewritten, the “sort” method is now prepared to handle not only sorting, but accepting and removing items as well:

def sort
   if params[‘your-list-id-1′] then
     sortables = params[‘your-list-id-1′]
   elsif params[‘your-list-id-2′] then
     sortables = params[‘your-list-id-2′]
   end
   sortables.each do |id|
     currentitem = FunkyItem.find_by_id(id.to_i)
     currentitem.position = sortables.index(id) + 1
     currentitem.lists_of_stuff_column_id = params[:id]
     currentitem.save
   end
   render :nothing => true
end

[edit] Rails / Sortable trees