My co-worker and myself have often been frustrated at the lack of descriptive examples when is comes to the script.aculo.us helper methods. Enclosed is a minor addition to the sortable_element documentation that includes an example with a few options not currently disclosed in the docs.
This patch was generated from repo v7118 (patched by the mega patch).
Important: For this to work, the sortable elements must have +id+
attributes in the form "string_identifier" (for example, "item_1"),
where the string portion does not contain underscores. Only the identifier
part of the +id+ attribute will be serialized.
Example 2:
<%=
-
Generates: Sortable.create("my_list", {handle:'drag', onUpdate:function(){
-
new Ajax.Updater('items', '/testing/order', {asynchronous:true, evalScripts:true, onComplete:function(request){
-
new Effect.Highlight("my_list",{});}, parameters:Sortable.serialize("my_list")})}})
sortable_element "my_list", :complete => visual_effect(:highlight, "my_list"),
:handle => "drag", :update => "my_list", :url => { :action => "order" }
%>
In Example 2, +my_list+ is the list of items to be reordered,
+complete+ dictates what javascript should be run when the ajax request is complete,
+handle+ indicates the dragable area of an individual list item,
+update+ instructs the page to replace the innerHTML of the element "my_list" with the response from the ajax request.