使用 zindex 选项进行拖放
说明
此选项指定在拖放操作期间应用于元素的 CSS z-index。默认情况下，元素的 z-index 在拖放时设置为 1000。
当您在页面上移动元素时，迟早有些元素会重叠。为了确保被拖放的项目在重叠项目中可见，其 z-index CSS 属性在拖放过程中更改为 1000。这将导致该项目出现在页面上所有其他项目的"上方"，除非您将其他项目的 z-index 设置为高于 1000 的值。
在所有情况下，拖动操作完成后，拖动元素的原始 z-index 都会恢复。
语法
new Draggable('element', {zindex: integer_number});
示例
<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">
window.onload = function() {
new Draggable('myimage1', { zindex:1002 });
new Draggable('myimage2', { zindex:1003 });
}
</script>
</head>
<body>
<p>Try overlapping both the images, WML logo will always be
on top of scriptaculous because its zindex 1003 is more than
scriptaculous zindex, which 1002.</p>
<img id = "myimage1" src = "/images/scriptaculous.gif"/>
<br />
<img id = "myimage2" src = "/images/wml_logo.gif"/>
</body>
</html>
这将产生以下结果 −
scriptaculous_drag_drop.html
