script.aculo.us 排序元素

Sortable 为用户提供了在容器中创建许多可拖动元素的能力。创建 Sortable 时，它会自动为容器创建相应的 Draggable 和 Droppable。

句法：

Sortable.create('container_id', {options});

可排序选项：

Options	Description
tag	It specifies the type of the elements within the container that are to be made sortable. Defaults to ‘li’.
only	The only provides a CSS class name, or array of class names, that a draggable item must posses in order to be accepted by the drop.
overlap	overlap has false, horizontal and vertical as its values. It controls the point at which a reordering is triggered. Default value is vertical
constraint	It has false, horizontal and vertical as values. Constrains the movement of dragged sortable elements. Defaults to vertical.
containment	Enables dragging and dropping between Sortables. Takes an array of elements or element-id.
handle	handle specifies an element to be used to initiate drag operations. By default, each element is its own handle.
hoverclass	hoverclass gives a CSS class name which is triggered on non-dragged sortable elements when a dragged element passes over them.
ghosting	ghosting enables the user to make a semi-transparent copy of the element which can be moved along with the mouse pointer. Defaults to false.
dropOnEmpty	dropOnEmpty allows sortable elements to be dropped onto an empty list. Defaults to false.
scroll	If the sortable container has a scrollbar, this option enables auto-scrolling of the list .
scrollSensitivity	If scrolling is enabled, it adjusts the point at which scrolling is triggered. Defaults to 20.
scrollSpeed	If scrolling is enabled, it adjusts the scroll speed. Defaults to 15.
tree	Tree enables sorting with sub-elements within the sortable element. Defaults to false.
treeTag	When the tree option is enabled,  it  specifies the container element type of the sub-element whose children are sortable

例子：

javascript

  
     
  
     
     
  
     
        window.onload = function() {
           Sortable.create('list', {tag:'li'});
        }
     
 
     
        li { cursor: move; }
     
  
  
  
 
     
        tag
        overlap
        constraint
        containment
        handle
     
  

输出：

回调选项

Options	Description
onChange	It is triggered whenever the sort order changes while dragging.  It gets the affected element as its parameter.
onUpdate	It is triggered upon the termination of a drag operation which results in a change in element order.