MooTools-ソート可能

SortablesはWeb開発の高度な機能であり、ユーザーインターフェイスデザインのオプションを実際に開くことができます。また、要素IDのリストを管理し、サーバー側のスクリプト作成に役立つ「serialize」と呼ばれる優れた機能も含まれています。

新しいソート可能なオブジェクトの作成

まず、アイテムのリストを変数に送信します。アイテムのリストの配列が必要な場合は、すべてのコレクションを変数に割り当てます。そして最後に、その変数をソート可能なコンストラクターに渡します。ソート可能なオブジェクトを作成するには、次の構文をご覧ください。

構文

var sortableListsArray = $$('#listA, #listB');
var sortableLists = new Sortables(sortableListsArray);

以下は、構文のHTMLコードです。

構文

<ul id = "listA">
   <li>Item A1</li>
   <li>Item A2</li>
   <li>Item A3</li>
   <li>Item A4</li>
</ul>

<ul id = "listB">
   <li>Item B1</li>
   <li>Item B2</li
   <li>Item B3</li>
   <li>Item B4</li>
</ul>

ソート可能オプション

Sortableは、ソート可能なオブジェクトをカスタマイズするためのさまざまなオプションを提供します。オプションについて説明しましょう。

制約

このオプションは、リスト要素がソート可能なオブジェクト内のul間をジャンプできるかどうかを決定します。たとえば、ソート可能なオブジェクトに2つのulがある場合、「 constrain：true 」を設定することにより、リストアイテムを親ulに「 constrain 」できます。制約を設定するための次の構文を見てください。

構文

var sortableLists = new Sortables(sortableListsArray, {
   constrain: true//false is default
});

クローン

このオプションは、カーソルの下にクローン要素を作成するのに役立ちます。リスト要素のソートに役立ちます。クローンの次の構文を見てください。

構文

var sortableLists = new Sortables(sortableListsArray, {
   clone: true//false is default
});

扱う

ハンドルは、ドラッグハンドルとして機能する要素を受け入れるオプションです。これは、リストアイテムを選択可能にする場合、またはリスト内のアクションを実行する場合に便利です。変数を指定しない場合、デフォルトではfalseと見なされます。ハンドルを使用するための次の構文を見てください。

構文

var handleElements = $$('.handlesClass');
var sortableLists = new Sortables(sortableListsArray, {
   handle: handleElements//false is default
});

不透明度

このオプションを使用すると、並べ替え要素を調整できます。クローンを使用する場合、不透明度はソートする要素に影響します。

構文

var sortableLists = new Sortables(sortableListsArray, {
   opacity: 1//default is 1
});

元に戻す

このオプションは、「false」または任意のFxオプションを受け入れます。復帰内でFxオプションを設定すると、ソートされた要素が所定の位置に収まるようにエフェクトが作成されます。復帰するための次の構文を見てください。

構文

var sortableLists = new Sortables(sortableListsArray, {
   revert: false//this is the default
});

//you can also set Fx options
var sortableLists = new Sortables(sortableListsArray, {
   revert: {
      duration: 50
   }
});

Snap

このオプションを使用すると、要素が追従を開始する前にユーザーがマウスをドラッグするピクセル数を確認できます。

構文

var sortableLists = new Sortables(sortableListsArray, {
   snap: 10//user will have to drag 10 px to start the list sorting
});

ソート可能なイベント

Sortableは、次のイベントを提供します。

onStart -ドラッグの開始時に実行されます（スナップがキックされると）
onSort -アイテムの順序が変わると実行されます
onComplete -要素を所定の位置にドロップすると実行されます

ソート可能なメソッド

次のソート可能なメソッドは、本質的にクラスに属する機能です-

detach（）

detach（）を使用すると、現在のすべてのハンドルを「切り離し」、リストオブジェクト全体をソート不可にすることができます。これはソートを無効にするのに便利です。

attach（）

このメソッドは、ハンドルをソート項目に「アタッチ」し、detach（）の後のソートを有効にします。

addItems（）

これにより、ソート可能なリストに新しいアイテムを追加できます。ユーザーが新しいアイテムを追加できるソート可能なリストがあり、その新しいアイテムを追加したら、その新しいアイテムでソートを有効にする必要があるとします。

removeItems（）

このメソッドを使用すると、ソート可能なリスト内のアイテムのソート機能を削除できます。これは、特定のリスト内の特定のアイテムをロックし、他のアイテムと並べ替えないようにする場合に便利です。

addLists（）

既存のリストに新しいアイテムを追加するだけでなく、ソート可能なオブジェクトにまったく新しいリストを追加することもできます。この方法を使用すると、複数のリストを追加できるため、ソート可能な項目を簡単に追加できます。

removeLists（）

ソート可能なオブジェクトからリストを削除しましょう。これは、特定のリストを所定の位置にロックする場合に役立ちます。リストを削除し、他のリストをソート可能なオブジェクトのままにして、削除されたリストのコンテンツをロックすることができます。

シリアライズ（）

並べ替えはすべて素晴らしいですが、データを使用して何かしたい場合はどうでしょうか？。シリアライズ（）;は、アイテムIDのリストとリスト上の順序を返します。インデックス番号によって、オブジェクト内からデータを取得するリストを選択できます。

例

次の例では、番号付けされたdiv要素の配列を作成します。後で、マウスポインターを使用してクリック、ドラッグ、およびドロップアクションでそれらを再配置します。次のコードを見てください。

<!DOCTYPE html>
<html>

   <head>
      <style>
         #test {
            position: inherit;
         }
         ul#sortables {
            width: 300px;
            margin: 0;
            padding: 0;
         }
         li.sortme {
            padding: 4px 8px;
            color: #fff;
            cursor: pointer;
            list-style: none;
            width: 300px;
            background-color: #222;
            border: 1px solid;
         }
         ul#sortables li {
            margin: 10px 0;
         }
      </style>

      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>

      <script type = "text/javascript">
         window.addEvent('domready', function() {
            new Sortables($('test'), {
               initialize: function(){
                  var step = 0;

                  this.elements.each(function(element, i) {
                     var color = [step, 82, 87].hsbToRgb();
                     element.setStyle('background-color', color);
                     step = step + 35;
                     element.setStyle('height', $random(40, 100));
                  });
               }
            });
         });
      </script>
   </head>

   <body>
      <ul id = "test">
         <li class = "sortme">0</li>
         <li class = "sortme">1</li>
         <li class = "sortme">2</li>
         <li class = "sortme">3</li>
         <li class = "sortme">4</li>
         <li class = "sortme">5</li>
         <li class = "sortme">6</li>
         <li class = "sortme">7</li>
         <li class = "sortme">8</li>
         <li class = "sortme">9</li>
         <li class = "sortme">10</li>
      </ul>
   </body>

</html>

次の出力が表示されます-

出力

Mootools-sortables

目次