拖放手柄选项

描述

此选项用于指定一个元素作为开始拖动操作的手柄。默认情况下，一个元素是其自己的手柄。

通常，可拖动项目本身充当其手柄，但有时你可能希望另一个元素（例如标题或列表项目）发起拖动。通常它可能是包含在一个较大元素中的元素，例如嵌入在可拖动 <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.htm

打印页面