用scriptaculous增强Web应用程序

本文将深入探讨如何利用scriptaculous的一些特性，包括拖放功能、分类等。我们从给一个基本的网页增加拖放特性开始进行说明。

拖放分类

使用scriptaculous库分为三步：

• 在网页的标题部分引用必要的脚本文件。
• 在页面中定义适当的项目。
• 插入应用功能的必要脚本。

scriptaculous库的第一个应用包括通过简单拖放单个项目给用户增加项目分类功能。在这个例子中，使用一个未分类的列表为元素。

关于增加JavaScript代码调用scriptaculous函数的一点提示：你应该通过CDATA段对代码进行格式化，以避免JavaScript中的一些特殊字符与HTML字符造成冲突。

列表A利用scriptaculous的Sortable特性，允许用户用鼠标拖放对一个项目列表进行分类。代码列表的主要部分为Sortable.create行，它建立一个分配给特定项目的可分类的元素（带group1的id值）。如果你加载这个页面，你可以在列表中轻易地上下拖动项目。

我们可以对上面的例子进行扩充，利用两个列表，允许项目在它们之间拖动。使用两个列表的关键在于为第二个列表建立第二个Sortable对象，并告诉Sortable对象要处理哪些对象。列表B中的代码处理这个任务。注意，第二个例子在调用Sortable.create方法时，给容纳值提交了两个列表。它还使用了分配给两个列表的id值，因此可以对列表进行分类，并在列表间移动列表元素。

在用户对列表项目进行分类以后，你可能希望保存分类结果。Sortable对象提供系列化功能，能够以适合HTTP GET或POST要求的格式对项目进行序列化。它返回一个类似于通过GET提交的HTML表单结果的字符串数组值。

序列化功能的麻烦之处在于它返回一个与列表元素对应的数字，并且它要求使用字符串值，后面接下划线（_）以及数字对列表项目命名（就像在前一个例子中宣称的单个元素一样）。使用这种命名方式，序列化方法返回列表中项目下划线后面的数字。因此，当如果对前一个例子中的第一个列表调用序列化方法（页面加载之初），即返回以下结果：

group1[]=1&group1[]=2&group1[]=3& group1[]=4&group1[]=5&group1[]=6&

group1[]=7&group1[]=8&group1[]=8&group1[]=10