script.aculo.us - 拖放
Web 2.0 界面最受欢迎的功能是拖放功能。幸运的是，script.aculo.us 具有支持拖放的固有功能。
要使用 script.aculo.us 的拖动功能，您需要加载 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>
拖动东西
使用 script.aculo.us 使项目可拖动非常简单。它需要创建 Draggable 类的实例，并标识要使其可拖动的元素。
Draggable 语法
new Draggable( element, options );
构造函数的第一个参数将要使其可拖动的元素标识为元素的 id 或对元素的引用。第二个参数指定了可拖动元素如何表现的可选信息。
可拖动选项
创建可拖动对象时，可以使用以下一个或多个选项。
| 选项 | 说明 | 示例 |
|---|---|---|
| revert | 如果设置为 true，则拖动结束时元素将返回到其原始位置。还指定在拖动操作停止时是否调用 reverteffect 回调。默认为 false。 | |
| snap | 用于使可拖动对象捕捉到网格或限制其移动。如果为 false(默认)，则不会发生捕捉或限制。
|
|
| zindex | 指定在拖动操作期间应用于元素的 CSS z-index。默认情况下，拖动时元素的 z-index 设置为 1000。 | |
| ghosting | 布尔值，确定是否应克隆可拖动对象以进行拖动，将原始对象保留在原处，直到克隆对象被放下。默认为 false。 | |
| constraint | 用于限制可拖动方向的字符串，水平或垂直。默认为 null，表示自由移动。 | |
| handle | 指定要用作启动拖动操作的句柄的元素。默认情况下，元素是其自己的句柄。 | |
| starteffect | 拖动开始时在元素上调用的效果。默认情况下，它会在 0.2 秒内将元素的不透明度更改为 0.2。 | |
| reverteffect | 拖动恢复时在元素上调用的效果。默认为平滑滑动到元素的原始位置。仅当 revert 为 true 时调用。 | |
| endeffect | 拖动结束时在元素上调用的效果。默认情况下，它会在 0.2 秒内将元素的不透明度更改为 1.0。 |
回调选项
此外，您可以在 options 参数 − 中使用以下任何回调函数
| 函数 | 说明 | 示例 |
|---|---|---|
| onStart | 在启动拖动时调用。 | |
| onDrag | 调用如果鼠标位置与上次调用时发生变化，则在鼠标移动时重复执行。 | |
| change | 与 onDrag 一样调用(这是首选回调)。 | |
| onEnd | 拖动结束时调用。 |
除了"change"回调之外，每个回调都接受两个参数:Draggable 对象和鼠标事件对象。
Draggable 示例
在这里，我们定义了 5 个可拖动元素:三个 <div> 元素、一个 <img> 元素和一个 <span> 元素。三个不同的 <div> 元素的目的是证明无论元素以静态(默认)、相对还是绝对的定位规则开始，拖动行为都不会受到影响。
<html>
<head>
<title>Draggables Elements</title>
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js"></script>
<script type = "text/javascript">
// Take all the elements whatever you want to make Draggable.
var elements = ['normaldiv', 'relativediv', 'absolutediv', 'image', 'span'];
// Make all the items drag able by creating Draggable objects
window.onload = function() {
elements.each(function(item) { new Draggable(item, {});});
}
</script>
</head>
<body>
<div id = "normaldiv">
This is a normal div and this is dragable.
</div>
<div id = "relativediv" style="position: relative;">
This is a relative div and this is dragable.
</div>
<div id = "absolutediv" style="position: absolute;">
This is an absolute div and this dragable.
</div>
<br />
<img id = "image" src = "/images/scriptaculous.gif"/>
<p>Let part <span id = "span" style = "color: blue;">
This is middle part</span> Yes, only middle part is dragable.</p>
</body>
</html>
这将产生以下结果 −
放置拖放对象
通过调用名为 Droppables 的命名空间中的 add() 方法，将元素转换为放置目标。
Droppables 命名空间有两个重要方法:add() 用于创建放置目标，remove() 用于删除放置目标。
语法
以下是用于创建放置目标的 add() 方法的语法。add() 方法使用作为其第一个参数传递的元素创建放置目标，并使用作为第二个参数传递的哈希中的选项。
Droppables.add( element, options );
remove() 的语法更加简单。remove() 方法从传递的元素中删除放置目标行为。
Droppables.remove(element);
选项
创建可拖动对象时，可以使用以下一个或多个选项。
| 选项 | 说明 | 示例 |
|---|---|---|
| Hoverclass | 当可拖放元素处于活动状态(有一个可接受的可拖动元素悬停在其上方)时，将添加到元素的 CSS 类的名称。默认为 null。 | |
| Accept | 描述 CSS 类的字符串或字符串数组。droppable 仅接受具有一个或多个这些 CSS 类的 draggable。 | |
| Containment | 指定元素或元素数组，该元素或元素数组必须是可拖动项目的父级，以便被放置目标接受。默认情况下，不应用任何包含约束。 | |
| Overlap | 如果设置为"horizontal"或"vertical"，则可拖放项仅在其在给定方向上重叠超过 50% 时才会对可拖动项做出反应。由 Sortables 使用，将在下一章中讨论。 | |
| greedy | 如果为 true(默认值)，则停止悬停其他可拖放项，可拖放项下方不会被搜索。 |
回调选项
此外，您可以在 options 参数 − 中使用以下任何回调函数
| 函数 | 描述 | 示例 |
|---|---|---|
| onHover | 指定当合适的可拖动项目悬停在放置目标上时激活的回调函数。由下一章讨论的 Sortables 使用。 | |
| onDrop | 指定在将合适的可拖动元素拖放到放置目标上时调用的回调函数。 |
示例
此处，此示例的第一部分与我们之前的示例类似，只是我们使用了 Prototype 方便的 $A() 函数将元素中所有 <img> 元素的节点列表转换为数组，元素中的 id 为 draggables。
<html>
<head>
<title>Drag and Drop 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() {
// 使可拖动部分中的所有图像都变为可拖动图像。
$A($('draggables').getElementsByTagName('img')).each(function(item) {
new Draggable(item, {revert: true, ghosting: true});
});
Droppables.add('droparea', {hoverclass: 'hoverActive', onDrop: moveItem});
// 默认设置放置区域为不清除。
$('droparea').cleared = false;
}
// 目标放置区域包含一段说明性文字
// ，当第一个项目
// 被放入其中时，我们想要删除这段文字。
function moveItem( draggable,droparea){
if (!droparea.cleared) {
droparea.innerHTML = '';
droparea.cleared = true;
}
draggable.parentNode.removeChild(draggable);
droparea.appendChild(draggable);
}
</script>
<style type = "text/css">
#draggables {
width: 172px;
border: 3px ridge blue;
float: left;
padding: 9px;
}
#droparea {
float: left;
margin-left: 16px;
width: 172px;
border: 3px ridge maroon;
text-align: center;
font-size: 24px;
padding: 9px;
float: left;
}
.hoverActive {
background-color: #ffffcc;
}
#draggables img, #droparea img {
margin: 4px;
border:1px solid red;
}
</style>
</head>
<body>
<div id = "draggables">
<img src = "/images/html.gif"/>
<img src = "/images/css.gif"/>
<img src = "/images/xhtml.gif"/>
<img src = "/images/wml_logo.gif"/>
<img src = "/images/javascript.gif"/>
</div>
<div id = "droparea">
Drag and Drop Your Images in this area
</div>
</body>
</html>
这将产生以下结果 −
