Script.aculo.us-scriptaculous-drag-drop

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

script.aculo.us-ドラッグアンドドロップ

Web 2.0インターフェースの最も一般的な機能は、ドラッグアンドドロップ機能です。 幸い、script.aculo.usには、ドラッグアンドドロップをサポートする固有の機能が備わっています。

script.aculo.usのドラッグ機能を使用するには、 dragdrop モジュールを読み込む必要があります。これには effects モジュールも必要です。 したがって、script.aculo.usの最小負荷は次のようになります。 

<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript"  src = "/javascript/scriptaculous.js?load = effects,dragdrop"></script>

物をドラッグする

script.aculo.usを使用してアイテムをドラッグ可能にするのは非常に簡単です。 _Draggable_クラスのインスタンスを作成し、ドラッグ可能にする要素を識別する必要があります。

ドラッグ可能な構文

new Draggable( element, options );

コンストラクターの最初のパラメーターは、要素の_id_または要素への参照としてドラッグ可能にする要素を識別します。 2番目のパラメーターは、ドラッグ可能な要素の動作に関するオプション情報を指定します。

ドラッグ可能なオプション

ドラッグ可能なオブジェクトの作成中に、次のオプションの1つ以上を使用できます。

Option Description Examples
revert If set to true, the element returns to its original position when the drag ends. Also specifies whether the reverteffect callback will be invoked when the drag operation stops. Defaults to false. Example
snap

Used to cause a draggable to snap to a grid or to constrain its movement. If false (default), no snapping or constraining occurs.

  • 整数xが割り当てられている場合、ドラッグ可能はxピクセルのグリッドにスナップします。
  • 配列[x、y]の場合、水平方向のドラッグはxピクセルのグリッドにスナップし、垂直方向のドラッグはyピクセルにスナップします。
  • また、配列[x、y]を返す_Function_（x、y、draggable）に準拠する関数にすることもできます。
 Example
zindex Specifies the CSS z-index to be applied to the element during a drag operation. By default, the element’s z-index is set to 1000 while dragging. Example
ghosting Boolean determining whether the draggable should be cloned for dragging, leaving the original in place until the clone is dropped. Defaults to false. Example
constraint A string used to limit the draggable directions, either horizontal or vertical. Defaults to null which means free movement. Example
handle Specifies an element to be used as the handle to start the drag operation. By default, an element is its own handle. Example
starteffect An effect called on element when dragging starts. By default, it changes the element’s opacity to 0.2 in 0.2 seconds. Example
reverteffect An effect called on element when the drag is reverted. Defaults to a smooth slide to element’s original position.Called only if revert is true. Example
endeffect An effect called on element when dragging ends. By default, it changes the element’s opacity to 1.0 in 0.2 seconds. Example

コールバックオプション

さらに、オプションパラメータで次のコールバック関数のいずれかを使用することができます-

Function Description Examples
onStart Called when a drag is initiated. Example
onDrag Called repeatedly when a mouse moves, if mouse position changes from previous call. Example
change Called just as onDrag (which is the preferred callback). Example
onEnd Called when a drag is ended. Example

「変更」コールバックを除いて、これらのコールバックはそれぞれ、ドラッグ可能オブジェクトとマウスイベントオブジェクトの2つのパラメーターを受け入れます。

ドラッグ可能な例

ここでは、ドラッグ可能な5つの要素を定義します。3つの<div>要素、<img>要素、および<span>要素です。 3つの異なる<div>要素の目的は、要素が静的（デフォルト）、相対、または絶対の配置規則で始まるかどうかに関係なく、ドラッグ動作が影響を受けないことを示すことです。 

<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">
        //Take all the elements whatever you want to make Draggable.
         var elements = ['normaldiv', 'relativediv', 'absolutediv', 'image', 'span'];

        //Make all the items drag able by creating Draggable objects
         window.onload = function() {
            elements.each(function(item) { new Draggable(item, {});});
         }
      </script>
   </head>

   <body>
      <div id = "normaldiv">
         This is a normal div and this is dragable.
      </div>

      <div id = "relativediv" style="position: relative;">
         This is a relative div and this is dragable.
      </div>

      <div id = "absolutediv" style="position: absolute;">
         This is an absolute div and this dragable.
      </div>
      <br/>

      <img id = "image" src = "/images/scriptaculous.gif"/>

      <p>Let part <span id = "span" style = "color: blue;">
         This is middle part</span> Yes, only middle part is dragable.</p>
   </body>
</html>

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

ドラッグしたものをドロップする

要素は、_Droppables_という名前空間内で_add（）_メソッドを呼び出してドロップターゲットに変換されます。

Droppables名前空間には、ドロップターゲットを作成する_add（）_とドロップターゲットを削除する_remove（）_の2つの重要なメソッドがあります。

構文

ドロップターゲットを作成するadd（）メソッドの構文は次のとおりです。 add（）メソッドは、2番目に渡されたハッシュのオプションを使用して、最初のパラメーターとして渡された要素からドロップターゲットを作成します。 

Droppables.add( element, options );

remove（）の構文はさらに単純です。 remove（）メソッドは、渡された要素からドロップターゲット動作を削除します。 

Droppables.remove(element);

オプション

ドラッグ可能なオブジェクトの作成中に、次のオプションの1つ以上を使用できます。

Option Description Examples
Hoverclass The name of a CSS class that will be added to the element while the droppable is active (has an acceptable draggable hovering over it). Defaults to null. Example
Accept A string or an array of strings describing CSS classes. The droppable will only accept draggables that have one or more of these CSS classes. Example
Containment Specifies an element, or array of elements, that must be a parent of a draggable item in order for it to be accepted by the drop target. By default, no containment constraints are applied. Example
Overlap If set to 'horizontal' or 'vertical', the droppable will only react to a Draggable if its overlapping by more than 50% in the given direction. Used by Sortables, discussed in the next chapter.  
greedy If true (default), it stops hovering other droppables, under the draggable won’t be searched. Example

コールバックオプション

さらに、オプションパラメータで次のコールバック関数のいずれかを使用することができます-

Function Description Examples
onHover Specifies a callback function that is activated when a suitable draggable item hovers over the drop target. Used by Sortables, discussed in the next chapter.  
onDrop Specifies a callback function that is called when a suitable draggable element is dropped onto the drop target. Example

例

ここで、この例の最初の部分は前の例と似ていますが、プロトタイプの便利な$ A（）関数を使用して、要素内のすべての<img>要素のノードリストをdraggablesのidを持つ配列に変換しました。 。 

<html>
   <head>
      <title>Drag and Drop Example</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() {
           //Make all the images draggables from draggables division.

            $A($('draggables').getElementsByTagName('img')).each(function(item) {
               new Draggable(item, {revert: true, ghosting: true});
            });

            Droppables.add('droparea', {hoverclass: 'hoverActive', onDrop: moveItem});

           //Set drop area by default  non cleared.
            $('droparea').cleared = false;
         }

        //The target drop area contains a snippet of instructional
        //text that we want to remove when the first item
        //is dropped into it.

         function moveItem( draggable,droparea){
            if (!droparea.cleared) {
               droparea.innerHTML = '';
               droparea.cleared = true;
            }

            draggable.parentNode.removeChild(draggable);
            droparea.appendChild(draggable);
         }
      </script>

      <style type = "text/css">
         #draggables {
            width: 172px;
            border: 3px ridge blue;
            float: left;
            padding: 9px;
         }

         #droparea {
            float: left;
            margin-left: 16px;
            width: 172px;
            border: 3px ridge maroon;
            text-align: center;
            font-size: 24px;
            padding: 9px;
            float: left;
         }

         .hoverActive {
            background-color: #ffffcc;
         }

         #draggables img, #droparea img {
            margin: 4px;
            border:1px solid red;
         }
      </style>
   </head>

   <body>
      <div id = "draggables">
         <img src = "/images/html.gif"/>
         <img src = "/images/css.gif"/>
         <img src = "/images/xhtml.gif"/>
         <img src = "/images/wml_logo.gif"/>
         <img src = "/images/javascript.gif"/>
      </div>

      <div id = "droparea">
         Drag and Drop Your Images in this area
      </div>
   </body>
</html>

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

「https://www.finddevguides.com/index.php?title=Script.aculo.us-scriptaculous-drag-drop&oldid=33418」から取得
Powered by MediaWiki