ハンドルオプションを使用したドラッグアンドドロップ

説明

このオプションは、ドラッグ操作を開始するためのハンドルとして使用される要素を指定するために使用されます。デフォルトでは、要素は独自のハンドルです。

ほとんどの場合、ドラッグ可能なアイテムは独自のハンドルとして機能しますが、代替要素にドラッグ、キャプション、またはリストの箇条書きを開始させたい場合があります。多くの場合、これは、ドラッグ可能な<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>

これにより、次の結果が生成されます–

Script.aculo.us-scriptaculous-handle-example

ハンドルオプションを使用したドラッグアンドドロップ

説明

構文

例

目次