Script.aculo.us 简明教程
script.aculo.us - Sorting Elements
很多时候，你需要为用户提供通过拖拽来重新排列元素的功能（比如列表中的项目）。
Many times, you need to provide the user with the ability to reorder elements (such as items in a list) by dragging them.
如果没有拖放，重新排列会是一场噩梦，但是 script.aculo.us 通过 Sortable 类提供了开箱即用的扩展重新排列支持。成为 Sortable 的元素传递给 Sortable 命名空间中的 create() 方法。
Without drag and drop, reordering can be a nightmare, but script.aculo.us provides extended reordering support out of the box through the Sortable class. The element to become Sortable is passed to the create() method in the Sortable namespace.
Sortable 由容器元素中的项目元素组成。当你创建一个新的 Sortable 时，它会负责创建相应的 Draggables 和 Droppables。
A Sortable consists of item elements in a container element. When you create a new Sortable, it takes care of the creation of the corresponding Draggables and Droppables.
若要使用 script.aculo.us 的 Sortable 功能，你需要加载 dragdrop 模块，它还需要 effects 模块。所以，你的 script.aculo.us 最小加载将如下所示 −
To use script.aculo.us’s Sortable capabilities, you’ll need to load the dragdrop module, which also requires the effects module. So your minimum loading for script.aculo.us will look like this −
<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，并根据传递的选项对它们进行排序。
Here is the syntax of the create() method to create a sortable item. The create() method takes the id of a container element and sorts them out based on the passed options.
Sortable.create('id_of_container',[options]);针对 Sortable.create 创建的 Sortable，使用 Sortable.destroy 来完全移除所有事件处理程序和引用。
Use Sortable.destroy to completely remove all the event handlers and references to a Sortable created by Sortable.create.
NOTE − 对 Sortable.create 的调用，如果引用元素已经是 Sortable，则隐式地调用 Sortable.destroy。以下是调用 destroy 函数的简单语法。
NOTE − A call to Sortable.create, implicitly calls on Sortable.destroy if the referenced element was already a Sortable. Here is the simple syntax to call the destroy function.
Sortable.destroy( element );Sortable Options
创建 Sortable 对象时，你可以使用以下一个或多个选项。
You can use one or more of the following options while creating your Sortable object.
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 参数中提供以下回调：
You can provide the following callbacks in the options parameter:
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. |
Sorting Examples
此演示已在 IE 6.0 中经过验证正常工作。它还适用于 Firefox 的最新版本。
This demo has been verified to work in IE 6.0. It also works in the latest version of 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>使用我们的在线编译器，更好地理解上面表格中讨论的各种选项的代码。
Use our online compiler for a better understanding of the code with different options discussed in the above table.
这将生成以下结果：
This will produce following result −
请注意 tag:'li' 的用法。同样地，可以对 <div> 中提供的以下图像列表进行排序 −
Note the usage of tag:'li'. Similarly, you can sort the following list of images available in <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>这将生成以下结果：
This will produce following result −
Serializing the Sortable Elements
Sortable 对象还提供了一个函数 Sortable.serialize()，用于以适用于 HTTP GET 或 POST 请求的格式对 Sortable 进行序列化。这可用于通过 Ajax 调用提交 Sortable 的顺序。
The Sortable object also provides a function Sortable.serialize() to serialize the Sortable in a format suitable for HTTP GET or POST requests. This can be used to submit the order of the Sortable via an Ajax call.
Options
创建 Sortable 对象时，你可以使用以下一个或多个选项。
You can use one or more of the following options while creating your Sortable object.
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. |
Serialize Examples
在此示例中，序列化的输出将只提供列表项 ID 中下划线后的数字。
In this example, the output of the serialization will only give the numbers after the underscore in the list item IDs.
要尝试，让列表保持其原始顺序，按按钮查看列表的序列化。现在，重新排列一些元素，然后再次单击按钮。
To try, leave the lists in their original order, press the button to see the serialization of the lists. Now, re-order some elements and click the button again.
<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>这将生成以下结果：
This will produce following result −
Moving Items between Sortables
以下示例显示如何将项目从一个列表移动到另一个列表。
The following example shows how to move items from one list to another list.
<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 元素。通过执行此操作，已启用在它们各自父级的上下文中对子元素进行排序；它还允许在两个容器之间移动这些子元素。
Note that the containment option for each container lists both the containers as containment elements. By doing so, we have enabled the child elements to be sorted within the context of their parent; It also enables them to be moved between the two containers.
针对两个列表都将 dropOnEmpty 设置为 true。若要查看此选项对该列表产生的影响，请将一个列表中的所有元素移动到另一个列表中，以便使一个列表为空。你将发现它允许在空列表上放置元素。
We set dropOnEmpty to true for both the lists. To see the effect this option has on that list, move all the elements from one list into other so that one list is empty. You will find that it is allowing to drop element on empty list.
这将生成以下结果：
This will produce following result −
Binding to Ajax
当然，onUpdate 是触发 Ajax 通知给服务器的首要候选，比如当用户重新对需要执行任务的列表或一些其他数据集进行排序时。结合使用 Ajax.Request 和 Sortable.serialize 使实时持久性变得足够简单 −
Of course, onUpdate is a prime candidate for triggering Ajax notifications to the server, for instance when the user reorders a to-do list or some other data set. Combining Ajax.Request and Sortable.serialize makes live persistence simple enough −
<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 下划线后面的标识符部分。
Sortable.serialize creates a string like: List[] = 1 & List[] = 2 & List[] = 3 &List[] = 4, where the numbers are the identifier parts of the list element ids after the underscore.
接下来我们需要编写 file.php，它会将已发数据作为 parse_str($_POST['data']) 解析，然后你可以执行任何你想做的操作。
Now we need to code file.php, which will parse posted data as parse_str($_POST['data']); and you can do whatever you want to do with this sorted data.
若要详细了解 AJAX，请阅读我们的简单 Ajax Tutorial 。
To learn more about AJAX, please go through our simple Ajax Tutorial.