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

説明

このオプションは、ドラッグ可能なオブジェクトが開始位置に戻るときに使用する効果を定義するために使用されます。

デフォルトでは、要素の元の位置への滑らかなスライドになります。 _reverteffect_オプションは、_revert_オプションがtrueに設定されている場合に、_endeffect_関数の直前に呼び出される関数を指定します。

構文

new Draggable('element', {reverteffect: '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() {
            var img = 'myimage';
            new Draggable('myimage' , {
            revert: true,
            reverteffect: function(){
               new Effect.MoveBy('myimage', 100,100);
               }
            });
         }
      </script>
   </head>

   <body>
      <p>Drag and leave this image to see the result.</p>
      <img id = "myimage" src = "/images/scriptaculous.gif"/>
   </body>
</html>

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

Script.aculo.us-scriptaculous-reverteffect-example

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

説明

構文

例

目次