Web 2.0界面最受欢迎的功能是拖放功能.幸运的是，script.aculo.us具有支持拖放的固有功能.
要使用script.aculo.us的拖动功能，您需要加载 dragdrop 模块，它还需要效果模块.因此，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 类的实例，并确定要使其成为可拖动的元素.
new Draggable(元素，选项);
构造函数的第一个参数标识要作为元素的 id 进行可拖动的元素，或者引用元素.第二个参数指定有关可拖动元素的行为的可选信息.
您可以使用以下一个或多个选项创建可拖动对象.
| Option | 描述 | 示例 |
|---|---|---|
| revert | 如果设置为 true ，则拖动结束时元素将返回其原始位置.还指定在拖动操作停止时是否将调用 reverteffect 回调.默认为 false . | 示例 |
| snap | 用于使拖动器捕捉到网格或限制其移动.如果为false(默认值)，则不会发生捕捉或约束.
| 示例 |
| zindex | 指定在拖动操作期间应用于元素的CSS z-index.默认情况下，拖动时元素的z-index设置为1000. | 示例 |
| 重影 | 布尔值确定是否应克隆拖动以进行拖动，将原始文件留在原位，直到删除克隆为止.默认为 false . | 示例 |
| 约束 | 用于限制可拖动方向的字符串，水平或垂直.默认为 null ，表示自由移动. | 示例 |
| handle | 指定要用作启动拖动操作的句柄的元素.默认情况下，元素是它自己的句柄. | 示例 |
| starteffect | 拖动开始时调用元素的效果.默认情况下，它会在0.2秒内将元素的不透明度更改为0.2. | 示例 |
| reverteffect | 恢复拖动时调用元素的效果.默认为平滑滑动到元素的原始位置.仅当 revert 为真时才调用. | 示例 |
| endeffect | 拖动结束时调用元素的效果.默认情况下，它会在0.2秒内将元素的不透明度更改为1.0. | 示例 |
此外，您可以在options参数 : 中使用以下任何回调函数;
| 功能 | 描述 | 例子 |
|---|---|---|
| onStart | 启动拖动时调用. | 示例 |
| onDrag | 当鼠标移动时，如果鼠标位置从前一次调用改变，则重复调用. | 示例 |
| change | 称为onDrag(这是首选的回调). | 示例 |
| onEnd | 拖动结束时调用. | 示例 |
除了"更改"回调之外，每个回调都接受两个参数:Draggable对象和鼠标事件对象.
在这里，我们定义了5个可拖动的元素:3个< 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);
创建可拖动对象时，可以使用以下一个或多个选项。
| Option | Description | Examples |
|---|---|---|
| Hoverclass | 在droppable处于活动状态时（将鼠标悬停在其上），将添加到元素的CSS类的名称。 默认为空。 | Example |
| Accept | 描述CSS类的字符串或字符串数组。 droppable将仅接受具有一个或多个这些CSS类的可拖动对象。 | Example |
| Containment | 指定一个元素或元素数组，该元素或元素数组必须是可拖动项目的父项，以便放置目标可以接受它。 默认情况下，不应用任何约束。 | Example |
| Overlap | 如果设置为"水平"或"垂直"，则可放置对象仅在其在给定方向上重叠超过50％时才会对可拖动对象做出反应。 由Sortables使用，将在下一章中进行讨论。 | |
| greedy | 如果为true（默认），它将停止悬停其他可放置对象，不会搜索可拖动对象下的对象。 | Example |
此外，您可以在options参数中使用以下任何回调函数:
| Function | Description | Examples |
|---|---|---|
| onHover | 指定当合适的可拖动项目悬停在放置目标上方时激活的回调函数。 由Sortables使用，将在下一章中进行讨论。 | |
| 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>
