拖放手柄選項

描述

此選項用於指定一個元素作為開始拖動操作的手柄。預設情況下，一個元素是其自己的手柄。

通常，可拖動專案本身充當其手柄，但有時你可能希望另一個元素（例如標題或列表專案）發起拖動。通常它可能是包含在一個較大元素中的元素，例如嵌入在可拖動 <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

列印頁面