使用 greedy 选项进行拖放
说明
如果此选项设置为 true(默认)，则停止处理悬停在其他可拖放项上的情况，不会搜索可拖放项下的元素。
语法
Droppables.add('element', {greedy: false or true});
示例
只需尝试此示例，将 greedy 逐一设置为 true 和 false。您会发现，如果将 greedy 设置为 false，则无法将项目放在放置区域中。
<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',
greedy: false,
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>
这将产生以下结果 −
scriptaculous_drag_drop.html
