Class: Sortables

リストをドラッグ&ドロップでソートできるインターフェイスを生成します。

引数:

  1. list - (いろいろ) 必須です。ソートできるようにしたいリスト。
    • この引数はElementElements、セレクターです。単一のリスト(またはID)が渡された場合、リストはその中でのみソートできます。
    • 複数のリスト間でソートを可能にするには、配列に複数のリストかリストのIDを渡す、あるいは、セレクターを使用してください。以下の例を参照のこと。
  2. options - (オブジェクト) 下のオプションとイベントを参照のこと。

オプション:

  • constrain - (真偽値: 初期値=false) 親要素に対してのドラッグを制限するかいなか。
  • clone - (いろいろ: 初期値=false) ドラッグしている間に要素のコピーをマウスカーソルの下に表示するか否か。コピーとして使われる要素を返す関数としても使えます。関数はmousedownイベント、要素、リストを引数として受け取ります。
  • handle - (文字列: 初期値=false) それぞれのソートアイテムをソートするためのハンドラを指定するためのセレクター。なにも見つからなければ、ソートアイテム自身が自分のハンドラとなります。
  • opacity - (整数: 初期値=1) ソートアイテムを内包している要素の透明度。
  • revert - (いろいろ: 初期値=false) ソートした後、最後に収まった場所にスライドエフェクトを適用するか否か。オブジェクトを渡した場合、それはrevertエフェクトの追加オプションとして使われます。
  • snap - (整数: 初期値=4) ソートをはじめるために、ソートアイテムをドラッグしなくてはならないピクセル数。

イベント:

  • start - ソートが開始されたときに発生します。
  • sort - ソートアイテムがリストの新しい場所に挿入されたときに発生します。
  • complete - ソートアイテムのドラッグが終了したときに発生します。

例:

var mySortables = new Sortables('list-1', {

    revert: { duration: 500, transition: 'elastic:out' }
});
//新しいSortableインスタンスをID'list-1'に作成し、revertエフェクトオプションを設定します。

var mySortables = new Sortables('#list-1, #list-2', {
    constrain: true,
    clone: false,
    revert: true

});
//新しいSortableインスタンスを'list-1'と'list-2'に生成し、constrainオプションをtrueにセットします。
//これで、ソートアイテムを別のリストにドラッグすることはできません。

var mySortables = new Sortables('#list-1, #list-2, #list-3');

//新しいSortableインスタンスをID'list-1'とID'list-2'と'list-3'に生成します。
(end)

Sortablesメソッド: attach

ソートを可能にするハンドラにマウスイベントリスナーを添附します。

構文:

mySortables.attach();

戻り値:

  • (オブジェクト) このSortablesインスタンス。

Sortablesメソッド: detach

ハンドラからマウスリスナーイベントを削除し、ソートできなくします。

構文:

mySortables.detach();

戻り値:

  • (オブジェクト) このSortablesインスタンス。

Sortablesメソッド: addItems

すでに存在するSortablesインスタンスにアイテムを追加します。

構文:

mySortables.addItems(item1[, item2[, item3[, ...]]]);

引数:

  1. items - (いろいろ) Array.flattenが引数に適用されるので、単一の要素、複数の要素、要素の配列、さらにそれらをいくらでも組み合わせたものを、このメソッドに渡せます。

戻り値:

  • (オブジェクト) このSortablesインスタンス。

例:

var mySortables = new Sortables('#list1, #list2');

var element1 = new Element('div');

var element2 = new Element('div');
var element3 = new Element('div');

$('list1').adopt(element1);
$('list2').adopt(element2, element3);
mySortables.addItems(element1, element2, element3);

注意点:

  • Sortablesインスタンスが複数のリストを持っているとき、ソートアイテムはリストに自動的に挿入されません。
  • まず適切なリストに対して要素を挿入し、それからaddItemsメソッドを呼び出してください。

参考情報:

Sortablesメソッド: removeItems

Sortablesインスタンスから1つ以上のアイテムを削除します。

構文:

mySortables.removeItems(item1[, item2[, item3[, ...]]]);

引数:

  1. items - (いろいろ) Array.flattenが引数に適用されるので、単一の要素、複数の要素、要素の配列、さらにそれらをいくらでも組み合わせたものを、このメソッドに渡せます。

戻り値:

  • (要素) 削除された要素からなる要素コレクション。

例:

var mySortables = new Sortables('#list1, #list2');

var element1 = $('list1').getFirst();

var element2 = $('list2').getLast();

mySortables.removeItems(element1, element2).destroy(); //要素はリストから取り除かれ、削除されました。

注意点:

  • ソートアイテムはリストから自動的に削除されず、単にソートができなくなるだけです。
  • はじめにソートアイテムに対してremoveItemsを適用し、次にリストコンテナから削除してください。

参考情報:

Sortablesメソッド: addLists

すでに存在するSortablesインスタンスにアイテムを追加し、新しいリストと古いリストの間でソートができるようにします。

構文:

mySortables.addLists(list1[, list2[, list3[, ...]]]);

引数:

  1. lists - (いろいろ) Array.flattenが引数に適用されるので、単一の要素、複数の要素、要素の配列、さらにそれらをいくらでも組み合わせたものを、このメソッドに渡せます。

戻り値:

  • (オブジェクト) このSortablesインスタンス。

例:

var mySortables = new Sortables('list1');
mySortables.addLists($('list2'));

注意点:

  • このメソッドをより高度に使えば、1方向ソートのようなことが行えます。

参考情報:

Sortablesメソッド: removeLists

リスト全体をSortablesインスタンスから取り除き、リスト間でのソートをできなくします。

構文:

mySortables.removeLists(list1[, list2[, list3[, ...]]]);

引数:

  1. lists - (いろいろ) Array.flattenが引数に適用されるので、単一の要素、複数の要素、要素の配列、さらにそれらをいくらでも組み合わせたものを、このメソッドに渡せます。

戻り値:

  • (要素) 削除されたリストからなる要素コレクション。

例:

var mySortables = new Sortables('#list1, #list2');
mySortables.removeLists($('list2'));

参考情報:

Sortablesメソッド: serialize

Sortablesインスタンス内のリストアイテムの順番を取得します。 リスト一つに対し、要素の順番を含んだ配列を返します。 複数のリストがある場合、それぞれのリストの順番を配列にまとめて返します。

引数:

  1. index - (いろいろ, オプション) 真偽値falseか整数(シリアライズするリストのインデックス)。すべてのリストをシリアライズする場合は、省略するか、falseを渡します。
  2. modifier - (関数, オプション) Sortablesのデフォルトの出力を上書きする関数。詳しくは以下を参照のこと。

例:

mySortables.serialize(1);
//2番目のリストをシリアライズして返します(配列は0ベースだということに注意...);
//['item_1-1', 'item_1-2', 'item_1-3']

mySortables.serialize();
//すべてのリストをシリアライズして、入れ子の配列にして返します。一つしかない場合は、そのリストの順番だけを返します。

/*[['item_1-1', 'item_1-2', 'item_1-3'],
  ['item_2-1', 'item_2-2', 'item_2-3'],
  ['item_3-1', 'item_3-2', 'item_3-3']]*/

mySortables.serialize(2, function(element, index){
    return element.getProperty('id').replace('item_','') + '=' + index;

}).join('&');
//配列を'&'で結合して、リスト3の要素のIDとその位置を結合した文字列を返します。
//'3-0=0&3-1=1&3-2=2'

このドキュメントはMooToolsのドキュメントを元に高橋文樹が翻訳(ちょっと改変)しました。
本家と同じく、Attribution-NonCommercial-ShareAlike 3.0ライセンスで公表されています。

トップに戻る