HTML CSS JAVASCRIPT PYTHON PYTHON2 JAVA C C++ C# SQL Excel Linux AI BOOTSTRAP PHP 教程库 参考手册 技术文章 测验 练习 HOWTO FAQ
❮ 上一节 下一节 ❯

script.aculo.us - 元素排序

很多时候，您需要为用户提供通过拖动元素(例如列表中的项目)来重新排序的功能。

如果没有拖放功能，重新排序可能就是一场噩梦，但 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 语法

以下是 create() 方法创建可排序项的语法。create() 方法获取容器元素的 id，并根据传递的选项对其进行排序。

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

使用 Sortable.destroy 完全删除由 Sortable.create 创建的 Sortable 的所有事件处理程序和引用。

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

Sortable.destroy( element );

可排序选项

创建可排序对象时，您可以使用以下一个或多个选项。

Sr.No 选项和说明
1

tag

指定可排序容器中可通过拖放进行排序的元素类型。默认为"li"。
2

only

指定可拖动项目必须具有的 CSS 类名或类名数组，以便被放置目标接受。这类似于 Draggable 的 accept 选项。默认情况下，不应用任何类名约束。
3

overlap

false、horizo​​ntal 或 vertical 之一。控制触发重新排序的点。默认为 vertical。
4

constraint

false、horizo​​ntal 或 vertical 之一。限制拖动的可排序元素的移动。默认为 vertical。
5

containment

启用可排序元素之间的拖放。采用元素或元素 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 选项和说明
1

onChange

拖动时，只要排序顺序发生变化，就会调用此函数。从一个 Sortable 拖动到另一个 Sortable 时，每个 Sortable 都会调用一次回调。获取受影响的元素作为其参数。
2

onUpdate

在拖拽操作终止时调用的函数，该函数会导致元素顺序发生变化。

排序示例

此演示已在 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>

这将产生以下结果 −

序列化可排序元素

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

语法

Sortable.serialize(element, options);

选项

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

Sr.No Option &描述
1

tag

设置要序列化的标签类型。这与 Sortable.create 中使用的类似。
2

name

设置将用于创建用于以 HTTP GET/POST 格式序列化的键/值对的键的名称。因此，如果 name 为 xyz，则查询字符串将类似于 −

xyz[]=value1 & xyz[]=value2 & xyz[]=value3

其中值按照子元素在容器中的出现顺序派生而来。

序列化示例

在此示例中，序列化的输出将仅提供列表项 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>

这将产生以下结果 −

在可排序项之间移动项目

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

<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 选项将两个容器都列为包含元素。通过这样做，我们已启用子元素在其父元素的上下文中排序;它还允许它们在两个容器之间移动。

我们将两个列表的 dropOnEmpty 设置为 true。要查看此选项对该列表的影响，请将所有元素从一个列表移到另一个列表，以便一个列表为空。您会发现它允许将元素放在空列表中。

将产生以下结果 −

绑定到 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 教程。

❮ 上一节 下一节 ❯