script.aculo.us-排序元素

📌 相关文章

📜 script.aculo.us-排序元素

📅 最后修改于: 2020-10-19 04:22:07 🧑 作者: Mango

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

没有拖放，重新排序可能是一场噩梦，但是script.aculo.us通过Sortable类提供了扩展的重新排序支持。要成为Sortable的元素将传递到Sortable命名空间中的create（）方法。

Sortable由容器元素中的item元素组成。创建新的Sortable时，它将负责创建相应的Draggables和Droppables 。

要使用script.aculo.us的Sortable功能，您需要加载拖放模块，该模块也需要effect模块。因此，您对script.aculo.us的最低加载应如下所示：

可排序语法

这是用于创建可排序项目的create（）方法的语法。 create（）方法获取容器元素的ID ，并根据传递的选项对它们进行排序。

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

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

注–调用Sortable.create，如果引用的元素已经是Sortable，则隐式调用Sortable.destroy。这是调用destroy函数的简单语法。

Sortable.destroy( element );

可排序的选项

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

Sr.No	Option & Description
1	tag Specifies the type of the elements within the sortable container that are to be sortable via drag and drop. Defaults to ‘li’.
2	only Specifies a CSS class name, or array of class names, that a draggable item must posses in order to be accepted by the drop target. This is similar to the accept option of Draggable. By default, no class name constraints are applied.
3	overlap One of false, horizontal or vertical. Controls the point at which a reordering is triggered. Defaults to vertical.
4	constraint One of false, horizontal or vertical. Constrains the movement of dragged sortable elements. Defaults to vertical.
5	containment Enables dragging and dropping between Sortables. Takes an array of elements or element-ids. Important note: To ensure that two way dragging between containers is possible, place all Sortable.create calls after the container elements.
6	handle Same as the Draggable option of the same name, specifying an element to be used to initiate drag operations. By default, each element is its own handle.
7	hoverclass Specifies a CSS class name to be applied to non-dragged sortable elements as a dragged element passes over them. By default, no CSS class name is applied.
8	ghosting Similar to the Draggable option of the same name, If true, this option causes the original element of a drag operation to stay in place while a semi-transparent copy of the element is moved along with the mouse pointer. Defaults to false. This option does not work with IE.
9	dropOnEmpty If true, it allows sortable elements to be dropped onto an empty list. Defaults to false.
10	scroll If the sortable container possesses a scrollbar due to the setting of the CSS overflow attribute, this option enables auto-scrolling of the list beyond the visible elements. Defaults to false.
12	scrollSensitivity When scrolling is enabled, it adjusts the point at which scrolling is triggered. Defaults to 20.
13	scrollSpeed When scrolling is enabled, it adjusts the scroll speed. Defaults to 15.
14	tree If true, it enables sorting with sub-elements within the sortable element. Defaults to false.
15	treeTag If the tree option is enabled, it specifies the container element type of the sub-element whose children takes part in the sortable behavior. Defaults to ‘ul’.

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

Sr.No	Option & Description
1	onChange A function that will be called upon whenever the sort order changes while dragging. When dragging from one Sortable to another, the callback is called once on each Sortable. Gets the affected element as its parameter.
2	onUpdate A function that will be called upon the termination of a drag operation that results in a change in element order.

Sr.No

Option & Description

onChange

A function that will be called upon whenever the sort order changes while dragging. When dragging from one Sortable to another, the callback is called once on each Sortable. Gets the affected element as its parameter.

onUpdate

A function that will be called upon the termination of a drag operation that results in a change in element order.

排序范例

该演示已被验证可以在IE 6.0中运行。它也可以在最新版本的Firefox中使用。

现场演示

Sorting Example
        
      
      
        
      

      
   
   
   
      Drag and drop list items to sort them out

      
         Physics
         Chemistry
         Maths
         Botany
         Sociology
         English
         Hindi
         Sanskrit

使用我们的在线编译器通过上表中讨论的不同选项更好地理解代码。

这将产生以下结果-

注意tag：’li’的用法。同样，您可以对

中可用的以下图像列表进行排序-

现场演示

Sorting Example
        
      
      
        
      

      
   

   
      Drag and drop list images to re-arrange them

这将产生以下结果-

序列化可排序元素

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

句法

Sortable.serialize(element, options);

选件

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

Sr.No	Option & Description
1	tag Sets the kind of tag that will be serialized. This will be similar to what is used in Sortable.create.
2	name Sets the name of the key that will be used to create the key/value pairs for serializing in HTTP GET/POST format. So if the name were to be xyz, the query string would look like − xyz[]=value1 & xyz[]=value2 & xyz[]=value3 Where the values are derived from the child elements in the order that they appear within the container.

Sr.No

Option & Description

tag

Sets the kind of tag that will be serialized. This will be similar to what is used in Sortable.create.

name

Sets the name of the key that will be used to create the key/value pairs for serializing in HTTP GET/POST format. So if the name were to be xyz, the query string would look like −

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

Where the values are derived from the child elements in the order that they appear within the container.

序列化示例

在此示例中，序列化的输出将仅给出列表项ID中下划线之后的数字。

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

现场演示

Sorting Example
        
      
      
        
      

          
   

   
      Drag and drop list items to sort them out properly

      
         Physics
         Chemistry
         Maths
         Botany
         Sociology
         English
      

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

这将产生以下结果-

在可排序项之间移动项目

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

现场演示

Sorting Example
        
      
      
        
      

              
   

   
      Drag and drop list items from one list to another list

      
         
            Physics
            Chemistry
            Botany
         
      

      
         
            Arts
            Politics
            Economics
            History
            Sociology

请注意，每个容器的containment选项将两个容器都列为containment元素。这样，我们使子元素能够在其父元素的上下文中进行排序；它还使它们能够在两个容器之间移动。

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

这将产生以下结果-

绑定到Ajax

当然， onUpdate是触发向服务器发送Ajax通知的主要候选对象，例如，当用户重新排序待办事项列表或某些其他数据集时。结合使用Ajax.Request和Sortable.serialize使实时持久性足够简单-

现场演示

Sorting Example
        
      
      
      
      

      
   

   
      When you will change the order, AJAX Request 
         will be made automatically.

      
         
            Physics
            Chemistry
            Maths
            Botany

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

现在我们需要编码file.php ，它将发布的数据解析为parse_str（$ _ POST [‘data’]）;。您可以使用此排序数据做任何您想做的事情。

要了解有关AJAX的更多信息，请浏览我们简单的Ajax教程。