script.aculo.us-要素の並べ替え

多くの場合、ユーザーに要素（リスト内のアイテムなど）をドラッグして並べ替える機能を提供する必要があります。

ドラッグアンドドロップを使用しないと、並べ替えは悪夢になりますが、_script.aculo.us_は、_Sortable_クラスを介して、追加の並べ替えをすぐにサポートします。 _Sortable_になる要素は、Sortableネームスペースの_create（）_メソッドに渡されます。

ソート可能は、コンテナ要素内のアイテム要素で構成されます。新しいSortableを作成すると、対応する_Draggables_および_Droppables_の作成が処理されます。

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>

ソート可能な構文

ソート可能なアイテムを作成するcreate（）メソッドの構文は次のとおりです。 _create（）_メソッドは、コンテナ要素の_id_を取得し、渡されたオプションに基づいてそれらをソートします。

Sortable.create('id_of_container',[options]);

_Sortable.destroy_を使用して、すべてのイベントハンドラーとSortable.createによって作成されたSortableへの参照を完全に削除します。

注-Sortable.createの呼び出し。参照される要素が既にSortableである場合、Sortable.destroyを暗黙的に呼び出します。 destroy関数を呼び出す簡単な構文を次に示します。

Sortable.destroy( element );

ソート可能なオプション

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

Sr.No	Option & Description
1	tag ドラッグアンドドロップによりソート可能なソート可能なコンテナ内の要素のタイプを指定します。デフォルトは「li」です。
2	only ドラッグ可能なアイテムがドロップターゲットに受け入れられるために必要なCSSクラス名またはクラス名の配列を指定します。これはDraggableの_accept_オプションに似ています。デフォルトでは、クラス名の制約は適用されません。
3	overlap false、_horizontal_または_vertical_のいずれか。再配列がトリガーされるポイントを制御します。デフォルトは_vertical_です。
4	constraint false、_horizontal_または_vertical_のいずれか。ドラッグされたソート可能な要素の動きを制限します。デフォルトは_vertical_です。
5	containment Sortables間のドラッグアンドドロップを有効にします。要素または要素IDの配列を取ります。重要な注意：コンテナ間で双方向のドラッグを可能にするには、コンテナ要素の後にすべてのSortable.create呼び出しを配置します。
6	handle 同じ名前のDraggableオプションと同じで、ドラッグ操作を開始するために使用される要素を指定します。デフォルトでは、各要素は独自のハンドルです。
7	hoverclass ドラッグされた要素がそれらの上を通過するときに、ドラッグされないソート可能な要素に適用されるCSSクラス名を指定します。デフォルトでは、CSSクラス名は適用されません。
8	ghosting 同じ名前のDraggableオプションと同様に、trueの場合、このオプションを使用すると、要素の半透明のコピーがマウスポインターと共に移動する間、ドラッグ操作の元の要素がそのまま残ります。デフォルトは_false_です。このオプションはIEでは機能しません。
9	dropOnEmpty trueの場合、ソート可能な要素を空のリストにドロップできます。デフォルトは_false_です。
10	scroll CSSオーバーフロー属性の設定のために、ソート可能なコンテナーがスクロールバーを所有している場合、このオプションは、表示要素を超えたリストの自動スクロールを有効にします。デフォルトは_false_です。
12	scrollSensitivity スクロールを有効にすると、スクロールがトリガーされるポイントが調整されます。デフォルトは20です。
13	scrollSpeed スクロールが有効な場合、スクロール速度が調整されます。デフォルトは15です。
14	tree trueの場合、ソート可能な要素内のサブ要素によるソートが有効になります。デフォルトはfalseです。
15	treeTag ツリーオプションが有効な場合、子がソート可能な動作に参加するサブ要素のコンテナ要素タイプを指定します。デフォルトは「ul」です。

optionsパラメーターで次のコールバックを提供できます。

Sr.No

Option & Description

1

onChange

ドラッグ中にソート順が変更されるたびに呼び出される関数。あるSortableから別のSortableにドラッグすると、コールバックは各Sortableで1回呼び出されます。影響を受ける要素をパラメーターとして取得します。

2

onUpdate

要素の順序を変更するドラッグ操作の終了時に呼び出される関数。

並べ替えの例

このデモはIE 6.0で動作することが確認されています。 Firefoxの最新バージョンでも動作します。

<html>
   <head>
      <title>Sorting 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() {
            Sortable.create('namelist',{tag:'li'});
         }
      </script>

      <style type = "text/css">
         li { cursor: move; }
      </style>
   </head>

   <body>
      <p>Drag and drop list items to sort them out</p>

      <ul id = "namelist">
         <li>Physics</li>
         <li>Chemistry</li>
         <li>Maths</li>
         <li>Botany</li>
         <li>Sociology</li>
         <li>English</li>
         <li>Hindi</li>
         <li>Sanskrit</li>
      </ul>
   </body>
</html>

上記の表で説明したさまざまなオプションを使用してコードをよりよく理解するには、オンラインコンパイラを使用してください。

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

_tag： 'li'_の使用に注意してください。同様に、あなたは<div>で利用可能な画像の次のリストをソートすることができます-

<html>
   <head>
      <title>Sorting 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() {
            Sortable.create('imagelist',{tag:'div'});
         }
      </script>

      <style type = "text/css">
         div { cursor: move; }
         img { border: 1px solid red; margin:5px; }
      </style>
   </head>

   <body>
      <p>Drag and drop list images to re-arrange them</p>

      <div id = "imagelist">
         <div><img src = "/images/wml_logo.gif" alt="WML Logo"/></div>
         <div><img src = "/images/javascript.gif" alt="JS"/></div>
         <div><img src = "/images/html.gif" alt="HTML"/></div>
         <div><img src = "/images/css.gif" alt="CSS"/></div>
      </div>
   </body>
</html>

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

ソート可能な要素のシリアル化

また、Sortableオブジェクトは、_Sortable.serialize（）_関数を提供して、HTTP GETまたはPOST要求に適した形式でSortableをシリアル化します。これは、Ajax呼び出しを介してSortableの順序を送信するために使用できます。

構文

Sortable.serialize(element, options);

オプション

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

Sr.No

Option & Description

1

tag

シリアル化されるタグの種類を設定します。これは、_Sortable.create_で使用されるものに似ています。

2

name

HTTP GET/POST形式でシリアル化するためのキー/値ペアを作成するために使用されるキーの名前を設定します。したがって、_name_がxyzである場合、クエリ文字列は次のようになります-

xyz [] = value1＆xyz [] = value2＆xyz [] = value3

値は、コンテナ内に表示される順序で子要素から派生します。

シリアル化の例

この例では、シリアル化の出力は、リストアイテムIDのアンダースコアの後の数字のみを提供します。

試すには、リストを元の順序のままにして、ボタンを押してリストのシリアル化を確認します。ここで、いくつかの要素を並べ替えて、もう一度ボタンをクリックします。

<html>
   <head>
      <title>Sorting 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() {
            Sortable.create('namelist',{tag:'li'});
         }

         function serialize(container, name){
            $('display').innerHTML = 'Serialization of ' +
            $(container).id +
            ' is: <br/><pre>' +
               Sortable.serialize( container,{ name:name} ) +
            '</pre>';
         }
      </script>

      <style type = "text/css">
         li { cursor: move; }
      </style>
   </head>

   <body>
      <p>Drag and drop list items to sort them out properly</p>

      <ul id = "namelist">
         <li id = "list1_1">Physics</li>
         <li id = "list1_2">Chemistry</li>
         <li id = "list1_3">Maths</li>
         <li id = "list1_4">Botany</li>
         <li id = "list1_5">Sociology</li>
         <li id = "list1_6">English</li>
      </ul>

      <p>Click following button to see serialized list which can be
         passed to backend script, like PHP, AJAX or CGI</p>

      <button type = "button" value = "Click Me"
         onclick = "serialize('namelist', 'list')"> Serialize
      </button>

      <div id = "display" style = "clear:both;padding-top:32px"></div>
   </body>
</html>

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

ソート可能アイテム間でアイテムを移動する

次の例は、あるリストから別のリストにアイテムを移動する方法を示しています。

<html>
   <head>
      <title>Sorting 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() {
            Sortable.create('List1', {containment: ['List1','List2'], dropOnEmpty: true});

            Sortable.create('List2', {containment: ['List1','List2'], dropOnEmpty: true});
         }
      </script>

      <style type = "text/css">
         li { cursor: move; }
         ul {
            width: 88px;
            border: 1px solid blue;
            padding: 3px 3px 3px 20px;
         }
      </style>
   </head>

   <body>
      <p>Drag and drop list items from one list to another list</p>

      <div style = "float:left">
         <ul id = "List1">
            <li>Physics</li>
            <li>Chemistry</li>
            <li>Botany</li>
         </ul>
      </div>

      <div style = "float:left;margin-left:32px">
         <ul id = "List2">
            <li>Arts</li>
            <li>Politics</li>
            <li>Economics</li>
            <li>History</li>
            <li>Sociology</li>
         </ul>
      </div>
   </body>
</html>

各コンテナの_containment_オプションは、両方のコンテナを包含要素としてリストすることに注意してください。これにより、親のコンテキスト内で子要素をソートできるようになりました。また、2つのコンテナ間で移動することもできます。

両方のリストで_dropOnEmpty_をtrueに設定します。このオプションがそのリストに与える影響を確認するには、1つのリストが空になるように、すべての要素をあるリストから別のリストに移動します。空のリストに要素をドロップできることがわかります。

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

Ajaxへのバインド

もちろん、_onUpdate_は、たとえばユーザーがto-doリストやその他のデータセットを並べ替えるときに、サーバーへのAjax通知をトリガーするための主要な候補です。 _Ajax.Request_と_Sortable.serialize_を組み合わせると、ライブパーシステンスが十分に簡単になります-

<html>
   <head>
      <title>Sorting 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() {
            Sortable.create('List' ,
               {
                  onUpdate: function() {
                     new Ajax.Request('file.php',
                        {
                           method: "post",
                           parameters: {data:Sortable.serialize('List')}
                        }
                     );
                  }
               }
            );
         }
      </script>

      <style type = "text/css">
         li { cursor: move; }
         ul {
            width: 88px;
            border: 1px solid blue;
            padding: 3px 3px 3px 20px;
         }
      </style>
   </head>

   <body>
      <p>When you will change the order, AJAX Request
         will be made automatically.</p>

      <div style = "float:left">
         <ul id = "List">
            <li id = "List_1">Physics</li>
            <li id = "List_2">Chemistry</li>
            <li id = "List_3">Maths</li>
            <li id = "List_4">Botany</li>
         </ul>
      </div>
   </body>
</html>

Sortable.serializeは、List [] = 1＆List [] = 2＆List [] = 3＆List [] = 4のような文字列を作成します。ここで、数字は、アンダースコアの後のリスト要素IDの識別子部分です。

ここで、_file.php_をコーディングする必要があります。これは、投稿されたデータを_parse_str（$ _ POST ['data']）; _として解析し、このソートされたデータで何でもできます。

AJAXの詳細については、単純なリンク：/ajax/index [Ajaxチュートリアル]をご覧ください。

Script.aculo.us-scriptaculous-sorting

script.aculo.us-要素の並べ替え

ソート可能な構文

ソート可能なオプション

並べ替えの例

ソート可能な要素のシリアル化

構文

オプション

シリアル化の例

ソート可能アイテム間でアイテムを移動する

Ajaxへのバインド

目次