使用 hoverclass 选项进行拖放
说明
这是 CSS 类的名称，当可拖放项处于活动状态(有一个可接受的可拖动项悬停在其上方)时，该类将添加到元素中。默认为 null。
语法
Droppables.add('element', {hoverclass: 'cssClass'});
此处 cssClass 是一个 CSS 类，将应用于元素。
示例
在此示例中，当您尝试将项目放在该区域中时，放置区域将变为浅黄色。
<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>
这将产生以下结果 −
scriptaculous_drag_drop.html
