使用 handle 选项进行拖放
说明
此选项用于指定要用作启动拖动操作的句柄的元素。默认情况下，元素是其自己的句柄。
大多数情况下，可拖动项目用作其自己的句柄，但有时您可能希望使用替代元素来启动拖动、标题或列表项目符号。通常，这可能是包含在较大元素中的元素，例如，嵌入在可拖动 <div> 中的小图像，或者它可能是一个完全独立的元素。
语法
以下是使用 constraint 选项的简单语法。
new Draggable('element', {handle: 'dragHandle'});
此处 dragHandle 是所需句柄元素的 ID。请注意，当发生拖动操作时，移动的仍然是指定为可拖动的元素，而不是句柄元素。
示例
<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', {handle: 'myimage2'});
}
</script>
</head>
<body>
<p>Try to drag WML logo image and see the result. It
will cause movement of green image. </p>
<img id = "myimage1" src = "/images/scriptaculous.gif"/>
<br />
<img id = "myimage2" src = "/images/wml_logo.gif"/>
</body>
</html>
这将产生以下结果 −
scriptaculous_drag_drop.html
