scriptaculous 序列化 拖动div

准备
包含库文件：

<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;

此问题便会迎刃而解~~！哈。