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、horizontal 或 vertical 之一。控制触发重新排序的点。默认为 vertical。 |
4 |
constraint false、horizontal 或 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 教程。