Script.aculo.us 简明教程
script.aculo.us - Drag & Drop
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>Draggable Syntax
new Draggable( element, options );构造函数的第一个参数使用元素的 id 或对该元素的引用来标识要制作成可拖动的元素。第二个参数指定有关可拖动元素行为方式的可选信息。
Draggable Options
创建可拖动对象时，您可以使用以下一个或多个选项。
Option |
Description |
Examples |
revert |
如果设为真，则在拖动结束时，元素会返回其原始位置。而且还指定了在拖动操作停止时是否调用 reverteffect 回调。默认为假。 |
|
snap |
用于导致可拖动元素贴靠在网格上，或约束其移动。如果为假（默认），则不会进行贴靠或约束。如果其被分配了一个整数 x，则可拖动元素将贴靠在一个 x 像素的网格上。如果是一个数组 [x, y]，则水平拖动将贴靠在一个 x 像素的网格上，而垂直拖动将贴靠在一个 y 像素的网格上。它也可以是一个符合 Function( x ， y ， draggable ) 的函数，该函数返回一个数组 [x, y]。 |
|
zindex |
指定在拖动操作期间应用于元素的 CSS z 索引。默认情况下，元素的 z 索引在拖动时设为 1000。 |
|
ghosting |
布尔值，用于确定是否在拖动时克隆可拖动元素，让原始元素保留在原处，直至克隆元素被放下。默认为假。 |
|
constraint |
用于限制可拖动方向（水平或垂直）的字符串。默认为 null，表示自由移动。 |
|
handle |
指定一个元素用于作为手柄，以便开始拖动操作。默认情况下，一个元素是其自身的手柄。 |
|
starteffect |
在开始拖动时对元素调用的效果。默认情况下，它将在 0.2 秒内将元素的不透明度更改为 0.2。 |
|
reverteffect |
在拖动被还原时对元素调用的效果。默认为平滑滑动到元素的原始位置。仅在 revert 为真时调用。 |
|
endeffect |
在拖动结束时对元素调用的效果。默认情况下，它将在 0.2 秒内将元素的不透明度更改为 1.0。 |
Callback Options
此外，你可以在 options 参数中使用以下任何回调函数 −
Function |
Description |
Examples |
onStart |
在开始拖动时调用。 |
|
onDrag |
当鼠标移动时重复调用，如果鼠标位置相对于上一次调用发生改变。 |
|
change |
可像在 onDrag 上调用那样进行调用（这是首选回调）。 |
|
onEnd |
在结束拖拽时调用。 |
除了“change”回调外，每个这些回调都接受两个参数：可拖动对象和鼠标事件对象。
Draggable Example
在此，我们定义了 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>这将生成以下结果：
Dropping Dragged Things
通过对 Droppables 名称空间中 add() 方法的调用，可以将某个元素转换为一个拖放目标。
Droppables 名称空间有两种重要的方法：add() 用于创建拖放目标，remove() 用于移除拖放目标。
Syntax
以下是创建拖放目标的 add() 方法的语法。add() 方法创建一个拖放目标，作为其第一个参数传递的元素，使用作为第二个参数传递的 hash 中的选项。
Droppables.add( element, options );remove() 的语法甚至更为简单。remove() 方法从传递的元素中移除拖放目标行为。
Droppables.remove(element);Options
创建可拖动对象时，您可以使用以下一个或多个选项。
Option |
Description |
Examples |
Hoverclass |
一个 CSS 类名称，这个类会被添加到元素中，而当可拖放元素处于活动状态（可接受的元素悬停在其上）时，这个类也会被添加到该元素中。默认为 null。 |
|
Accept |
一个字符串或描述 CSS 类的字符串数组。可拖放元素仅会接受包含一个或多个这些 CSS 类的一个或多个可拖动元素。 |
|
Containment |
指定了一个元素或元素数组，它必须是可拖动元素的父级，以便被拖放目标接受。默认情况下，不适用任何包含限制。 |
|
Overlap |
如果设置为’horizontal' 或’vertical'，那么只当可拖动元素在指定方向上重叠超过 50% 时，可拖放元素才会对可拖动元素做出反应。这由 Sortable 使用，在下一章中讨论。 |
|
greedy |
如果为 true（默认值），则它会停止悬停其他可拖放元素，不会在可拖动元素下进行搜索。 |
Callback Options
此外，你可以在 options 参数中使用以下任何回调函数 −
Function |
Description |
Examples |
onHover |
指定一个回调函数，当合适的可拖动元素悬停在可拖放目标上时，此函数会被激活。这由 Sortable 使用，在下一章中讨论。 |
|
onDrop |
指定一个回调函数，当合适的可拖动元素被拖放到拖放目标上时，此函数会被调用。 |
Example
在此，此示例的第一部分与我们之前的示例类似，只不过我们使用了 Prototype 的方便 $A() 函数，将具有 id 为 draggables 的元素中所有 <img> 元素的节点列表转换为一个数组。
<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() {
// Make all the images draggables from draggables division.
$A($('draggables').getElementsByTagName('img')).each(function(item) {
new Draggable(item, {revert: true, ghosting: true});
});
Droppables.add('droparea', {hoverclass: 'hoverActive', onDrop: moveItem});
// Set drop area by default non cleared.
$('droparea').cleared = false;
}
// The target drop area contains a snippet of instructional
// text that we want to remove when the first item
// is dropped into it.
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>这将生成以下结果：