Script.aculo.us 简明教程

script.aculo.us - Sorting Elements

很多时候，你需要为用户提供通过拖拽来重新排列元素的功能（比如列表中的项目）。

如果没有拖放，重新排列会是一场噩梦，但是 script.aculo.us 通过 Sortable 类提供了开箱即用的扩展重新排列支持。成为 Sortable 的元素传递给 Sortable 命名空间中的 create() 方法。

Sortable 由容器元素中的项目元素组成。当你创建一个新的 Sortable 时，它会负责创建相应的 Draggables 和 Droppables。

若要使用 script.aculo.us 的 Sortable 功能，你需要加载 dragdrop 模块，它还需要 effects 模块。所以，你的 script.aculo.us 最小加载将如下所示 −

<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript"  src = "/javascript/scriptaculous.js?load = effects,dragdrop"></script>

Sortable Syntax

以下是创建一个可排序项目的 create() 方法的语法。create() 方法接受容器元素的 id，并根据传递的选项对它们进行排序。

Sortable.create('id_of_container',[options]);

针对 Sortable.create 创建的 Sortable，使用 Sortable.destroy 来完全移除所有事件处理程序和引用。

NOTE − 对 Sortable.create 的调用，如果引用元素已经是 Sortable，则隐式地调用 Sortable.destroy。以下是调用 destroy 函数的简单语法。

Sortable.destroy( element );

Sortable Options

创建 Sortable 对象时，你可以使用以下一个或多个选项。

Sr.No

Option & Description

1

tag 指定可排序容器内可以通过拖放进行排序的元素的类型。默认为 'li'。

2

only 指定一个 CSS 类名称或类名称数组，可拖拽项必须拥有它才能被放置目标接受。这类似于 Draggable 的 accept 选项。默认情况下，不应用类名称约束。

3

overlap 三个之一：false、水平或垂直。控制触发重新排序的点。默认为垂直。

4

constraint 三个之一：false、水平或垂直。限制已拖拽的可排序元素的移动。默认为垂直。

5

containment 在 Sortable 之间启用拖放。采用元素或元素 id 的数组。重要提示：为了确保可以在容器之间双向拖放，请将所有 Sortable.create 调用放在容器元素之后。

6

handle 与同名 Draggable 选项相同，指定用于发起拖拽操作的元素。默认情况下，每个元素都是其自己的手柄。

7

hoverclass 指定要应用到未拖拽的可排序元素的 CSS 类名，因为拖拽的元素经过它们。默认情况下，不应用 CSS 类名称。

8

ghosting 与同名 Draggable 选项类似，如果为 true，此选项会导致拖拽操作的原始元素保持原位，同时该元素的半透明副本随鼠标指针移动。默认为 false。此选项不适用于 IE。

9

dropOnEmpty 如果为 true，则允许将可排序元素丢弃到一个空列表中。默认为 false。

10

scroll 如果可排序容器因 CSS overflow 特性的设置而拥有一个滚动条，此选项将启用列表超出了可见元素的自动滚动。默认为 false。

12

scrollSensitivity 启用滚动时，调整滚动触发的点。默认为 20。

13

scrollSpeed 启用滚动时，调整滚动速度。默认为 15。

14

tree 如果为 true，启用可排序元素中子元素的排序。默认为 false。

15

treeTag 如果启用 tree 选项，它将指定子元素的容器元素类型，其中的子元素参与可排序行为。默认为“ul”。

可以在 options 参数中提供以下回调：

Sr.No

Option & Description

1

onChange 在拖动时排序顺序发生变化时将调用的函数。从一个 Sortable 拖动到另一个 Sortable 时，将在每个 Sortable 上调用该回调一次。获取受影响的元素作为其参数。

2

onUpdate 在导致元素顺序发生变更的拖动操作终止时将调用的函数。

Sorting Examples

此演示已在 IE 6.0 中经过验证正常工作。它还适用于 Firefox 的最新版本。

<html>
   <head>
      <title>Sorting Example</title>

      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js"></script>

      <script type = "text/javascript">
         window.onload = function() {
            Sortable.create('namelist',{tag:'li'});
         }
      </script>

      <style type = "text/css">
         li { cursor: move; }
      </style>
   </head>

   <body>
      <p>Drag and drop list items to sort them out</p>

      <ul id = "namelist">
         <li>Physics</li>
         <li>Chemistry</li>
         <li>Maths</li>
         <li>Botany</li>
         <li>Sociology</li>
         <li>English</li>
         <li>Hindi</li>
         <li>Sanskrit</li>
      </ul>
   </body>
</html>

使用我们的在线编译器，更好地理解上面表格中讨论的各种选项的代码。

这将生成以下结果：

请注意 tag:'li' 的用法。同样地，可以对 <div> 中提供的以下图像列表进行排序 −

<html>
   <head>
      <title>Sorting Example</title>

      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js"></script>

      <script type = "text/javascript">
         window.onload = function() {
            Sortable.create('imagelist',{tag:'div'});
         }
      </script>

      <style type = "text/css">
         div { cursor: move; }
         img { border: 1px solid red; margin:5px; }
      </style>
   </head>

   <body>
      <p>Drag and drop list images to re-arrange them</p>

      <div id = "imagelist">
         <div><img src = "/images/wml_logo.gif" alt="WML Logo" /></div>
         <div><img src = "/images/javascript.gif" alt="JS" /></div>
         <div><img src = "/images/html.gif" alt="HTML" /></div>
         <div><img src = "/images/css.gif" alt="CSS" /></div>
      </div>
   </body>
</html>

这将生成以下结果：

Serializing the Sortable Elements

Sortable 对象还提供了一个函数 Sortable.serialize()，用于以适用于 HTTP GET 或 POST 请求的格式对 Sortable 进行序列化。这可用于通过 Ajax 调用提交 Sortable 的顺序。

Syntax

Sortable.serialize(element, options);

Options

创建 Sortable 对象时，你可以使用以下一个或多个选项。

Sr.No

Option & Description

1

tag 设置将序列化的标记类型。这将与 Sortable.create 中使用的类似。

2

name 设置将用于创建 HTTP GET/POST 格式中用于序列化的键/值对的键名。因此，如果名称为 xyz，查询字符串将如下所示：−xyz[]=value1 & xyz[]=value2 & xyz[]=value3，其中的值来自包含在容器中的子元素，按照它们在容器中出现的顺序。

Serialize Examples

在此示例中，序列化的输出将只提供列表项 ID 中下划线后的数字。

要尝试，让列表保持其原始顺序，按按钮查看列表的序列化。现在，重新排列一些元素，然后再次单击按钮。

<html>
   <head>
      <title>Sorting Example</title>

      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js"></script>

      <script type = "text/javascript">
         window.onload = function() {
            Sortable.create('namelist',{tag:'li'});
         }

         function serialize(container, name){
            $('display').innerHTML = 'Serialization of ' +
            $(container).id +
            ' is: <br/><pre>' +
               Sortable.serialize( container,{ name:name} ) +
            '</pre>';
         }
      </script>

      <style type = "text/css">
         li { cursor: move; }
      </style>
   </head>

   <body>
      <p>Drag and drop list items to sort them out properly</p>

      <ul id = "namelist">
         <li id = "list1_1">Physics</li>
         <li id = "list1_2">Chemistry</li>
         <li id = "list1_3">Maths</li>
         <li id = "list1_4">Botany</li>
         <li id = "list1_5">Sociology</li>
         <li id = "list1_6">English</li>
      </ul>

      <p>Click following button to see serialized list which can be
         passed to backend script, like PHP, AJAX or CGI</p>

      <button type = "button" value = "Click Me"
         onclick = "serialize('namelist', 'list')"> Serialize
      </button>

      <div id = "display" style = "clear:both;padding-top:32px"></div>
   </body>
</html>

这将生成以下结果：

Moving Items between Sortables

以下示例显示如何将项目从一个列表移动到另一个列表。

<html>
   <head>
      <title>Sorting Example</title>

      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js"></script>

      <script type = "text/javascript">
         window.onload = function() {
            Sortable.create('List1', {containment: ['List1','List2'], dropOnEmpty: true});

            Sortable.create('List2', {containment: ['List1','List2'], dropOnEmpty: true});
         }
      </script>

      <style type = "text/css">
         li { cursor: move; }
         ul {
            width: 88px;
            border: 1px solid blue;
            padding: 3px 3px 3px 20px;
         }
      </style>
   </head>

   <body>
      <p>Drag and drop list items from one list to another list</p>

      <div style = "float:left">
         <ul id = "List1">
            <li>Physics</li>
            <li>Chemistry</li>
            <li>Botany</li>
         </ul>
      </div>

      <div style = "float:left;margin-left:32px">
         <ul id = "List2">
            <li>Arts</li>
            <li>Politics</li>
            <li>Economics</li>
            <li>History</li>
            <li>Sociology</li>
         </ul>
      </div>
   </body>
</html>

请注意，每个容器的 containment 选项将两个容器都列为 containment 元素。通过执行此操作，已启用在它们各自父级的上下文中对子元素进行排序；它还允许在两个容器之间移动这些子元素。

针对两个列表都将 dropOnEmpty 设置为 true。若要查看此选项对该列表产生的影响，请将一个列表中的所有元素移动到另一个列表中，以便使一个列表为空。你将发现它允许在空列表上放置元素。

这将生成以下结果：

Binding to Ajax

当然，onUpdate 是触发 Ajax 通知给服务器的首要候选，比如当用户重新对需要执行任务的列表或一些其他数据集进行排序时。结合使用 Ajax.Request 和 Sortable.serialize 使实时持久性变得足够简单 −

<html>
   <head>
      <title>Sorting Example</title>

      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js"></script>

      <script type = "text/javascript">
         window.onload = function() {
            Sortable.create('List' ,
               {
                  onUpdate: function() {
                     new Ajax.Request('file.php',
                        {
                           method: "post",
                           parameters: {data:Sortable.serialize('List')}
                        }
                     );
                  }
               }
            );
         }
      </script>

      <style type = "text/css">
         li { cursor: move; }
         ul {
            width: 88px;
            border: 1px solid blue;
            padding: 3px 3px 3px 20px;
         }
      </style>
   </head>

   <body>
      <p>When you will change the order, AJAX Request
         will be made automatically.</p>

      <div style = "float:left">
         <ul id = "List">
            <li id = "List_1">Physics</li>
            <li id = "List_2">Chemistry</li>
            <li id = "List_3">Maths</li>
            <li id = "List_4">Botany</li>
         </ul>
      </div>
   </body>
</html>

Sortable.serialize 会创建一个类似这样的字符串：List[] = 1 & List[] = 2 & List[] = 3 &List[] = 4，其中的数字是列表元素 id 下划线后面的标识符部分。

接下来我们需要编写 file.php，它会将已发数据作为 parse_str($_POST['data']) 解析，然后你可以执行任何你想做的操作。

若要详细了解 AJAX，请阅读我们的简单 Ajax Tutorial 。