可拖拽，保存展开收起状态的个人主页

<li id="my_list_b">two<div id="my_friend_2" style="display:<%if @user.position[3]=="1"%>block<%else%>none<%end%>"></li>

 

核心就用到了

sortable_element(element_id, options = {}) 
Makes the element with the DOM ID specified by element_id sortable by drag-and-drop and make an Ajax call whenever the sort order has changed. By default, the action called gets the serialized sortable element as parameters. 

Example: 

  <%= sortable_element("my_list", :url => { :action => "order" }) %>

In the example, the action gets a "my_list" array parameter containing the values of the ids of elements the sortable consists of, in the current order. 

Important: For this to work, the sortable elements must have id attributes in the form "string_identifier". For example, "item_1". Only the identifier part of the id attribute will be serialized. 

Additional options are: 

:format: A regular expression to determine what to send as the serialized id to the server (the default is /^[^_]*_(.*)$/).  
:constraint: Whether to constrain the dragging to either :horizontal or :vertical (or false to make it unconstrained).  
:overlap: Calculate the item overlap in the :horizontal or :vertical direction.  
:tag: Which children of the container element to treat as sortable (default is li).  
:containment: Takes an element or array of elements to treat as potential drop targets (defaults to the original target element).  
:only: A CSS class name or arry of class names used to filter out child elements as candidates.  
:scroll: Determines whether to scroll the list during drag operationsif the list runs past the visual border.  
:tree: Determines whether to treat nested lists as part of the main sortable list. This means that you can create multi- layer lists, and not only sort items at the same level, but drag and sort items between levels.  
:hoverclass: If set, the Droppable will have this additional CSS class when an accepted Draggable is hovered over it.  
:handle: Sets whether the element should only be draggable by an embedded handle. The value may be a string referencing a CSS class value (as of script.aculo.us V1.5). The first child/grandchild/etc. element found within the element that has this CSS class value will be used as the handle.  
:ghosting: Clones the element and drags the clone, leaving the original in place until the clone is dropped (defaut is false).  
:dropOnEmpty: If set to true, the Sortable container will be made into a Droppable, that can receive a Draggable (as according to the containment rules) as a child element when there are no more elements inside (defaut is false).  
:onChange: Called whenever the sort order changes while dragging. When dragging from one Sortable to another, the callback is called once on each Sortable. Gets the affected element as its parameter.  
:onUpdate: Called when the drag ends and the Sortable‘s order is changed in any way. When dragging from one Sortable to another, the callback is called once on each Sortable. Gets the container as its parameter.  

 

页面端。把各个显示的部分存成partials
_my_a.rhtml

<li id="my_list_a">one<div id="my_friend_1" style="display:<%if @user.position[2]=="1"%>block<%else%>none<%end%>"></li>

 

_my_b.rhtml

 

这样，在拖拽完成后，可以向action=>order 提交。一个字段为 my_list 的参数["a","b"]

保存位置:action

Table.position = params[:my_list]

思路就是保存在表中的数据position 字段中根据数组的 index显示位置 把各个部分写成partial

显示的action

@order = Table.find(id).position

页面端

<%= render :partial => "partials/my_#{@order[0]}", :locals=>{:u => @user}%>
<%= render :partial => "partials/my_#{@order[1]}", :locals=>{:u => @user}%>

这样就完成的排序的功能。现在我们要加上各个块的状态保存

页面端改变块的状态

function my_shrink(obj,p)
{
 shrink_div = obj.id + "_1"
 if(document.getElementById(shrink_div).style.display=="block")
 {
  document.getElementById(shrink_div).style.display="none";
  obj.src = "/展开.gif";
               new Ajax.Updater('tmp_div', '/position/shrink/0?p='+p, {asynchronous:true, evalScripts:true});
 }else
 {
  document.getElementById(shrink_div).style.display="block"
  obj.src = "/收起.gif"  
               new Ajax.Updater('tmp_div', '/position/shrink/1?p='+p, {asynchronous:true, evalScripts:true});
 }
}

这是点击状态改变按钮触发的事件，把位置的状态保存

:action

Table.position.index[:params[:P]] = params[:id]

这样就保存的状态。

positon 字段存储为

['a','b','1','1']