包含库文件：
<script src="../prototype.js" type="text/javascript"></script>
<script src="../scriptaculous.js" type="text/javascript"></script>
可排序对象
例子：
以下代码将创建一个列表，并且可以拖动排序，每次移动户都将触发一个可以返回列表顺序的函数，并且已经序列化，可以通过Ajax传给服务器端。
//建立列表：
<ul id="x">
<li id="item_1">1</li>
<li id="items_2">2</li>
<li d="items_3">3</li>
<li d="items_4">4</li>
</ul>
//开始建立可排序组件
<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
Sortable.create('x',
{overlap:'horizontal',
ghosting:true,
constraint:false,
onUpdate:function(sortable){alert(Sortable.serialize(sortable))},
onChange:function(element){$('state').innerHTML = Sortable.serialize(element.parentNode)}
});
这样一个可以排序的列表就作好啦~~恭喜~!
讲解：
其中，Sortable.create()的作用是将这个id=”x”的<UL>转化为可排序控件。第一个参数’x’便是此控件的ID。 花括号{ }内的属性列表是一些预置属性和各种动作的触发函数：
各个属性的意义：
l overlap : horizontal | vertical指明了列表是水平方向还是垂直方向排列。(在constraint属性中会和此属性有关)
l ghosting: true | false这个属性指明了拖动行时是否会在原来位置显示虚影占位。
l constraint: 'vertical' | 'horizontal' | false 这个属性指明了是否会被约束拖动方向。
l onUpdate:function(sortable){} ：update事件将会在完成一次排序行为时(拖动后鼠标松开时)被触发。”sortable”参数中将会传入被绑定的<UL>对象。
l onChange:function(element){} ：此事件将会在鼠标拖动时被触发，每移动一下都将触发此事件。注意：此事件传入的element参数是<UL>下被拖动的<LI>而非整个<UL>
构造函数中的参数列表:
参数名 初始值 说明
element: element
tag: 'li', // assumes li children,标签内可被拖动的子标签名
dropOnEmpty: false, ??
tree: false, // fixme: unimplemented ??
overlap: 'vertical', // one of 'vertical', 'horizontal'
constraint: 'vertical', // one of 'vertical', 'horizontal', false
handle: false, // or a CSS class ,CSS样式是此handle指定样式的标签部分可拖动如为false则整体可拖.
only: false, ???
hoverclass: null, //被拖入位置的CSS
ghosting: false, //显示残影占位
format: null, //???
onChange: Prototype.emptyFunction,
onUpdate: Prototype.emptyFunction
dropOnEmpty: true //or false 指定此<UL>等可排序区域可否接受其他<UL>中的元素
containment: ["list1","list2"] 当dropOnEmpty设为true,在此参数中设置可接受的列表id
除了构造函数,其余的常用方法：
l Sortable.serialize(sortable) 静态方法。返回一个当前sortable对象的按照排序顺序先后排列序号的字符串：如x[]=1& x[]=2& x[]=3，每一个<Li>的序号通过<li id="item_1">1</li>的下滑线后面的数字指定。下滑线前面的单词在一组排序中应使用一个相同的前缀。不同的组，前缀应该不同。
l Sortable .destroy(sortable) 静态方法。撤销此对象的排序属性。
常见问题:
当我们给<UL>外面加上DIV，比如<div style=”overflow-y:scroll;height:100px;”>
我们会发现页面一团糟了，UL溢出了DIV, 页面乱七八糟。
不用急，在Div的Style中加入 “position:relative;”就解决了<UL>不听指挥的问题。
现在再用一下，拖动有点问题……我们会发现定位不准确了，这是因为没有考虑到滚动条的偏移量。
我们在Sortable的构造函数前加上一句：
Position.includeScrollOffsets = true;
此问题便会迎刃而解~~！哈。
