Script.aculo.us-scriptaculous-change-example

提供:Dev Guides
移動先:案内検索

変更オプション付きのドラッグアンドドロップ

説明

このコールバック関数は、ドラッグの進行中に呼び出されます。 これは、ドラッグイベントの優先コールバックです。

構文

new Draggable('element', {change: 'effectFunction'});

ここで、effectFunctionは適用される効果を定義する関数です。

<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(
               'myimage', {
                  change : function(){
                     new Effect.Opacity('myimage', {from:0, to:1.0, duration:1});
                  }
               }
            );
         }
      </script>
   </head>

   <body>
      <p>While you drag this image it become disappear.</p>
      <img id = "myimage" src = "/images/scriptaculous.gif"/>
   </body>
</html>

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