Core
Native
Class
Element
Utilities
Fx
Request
Plugins
- Fx.Slide
- Fx.Scroll
- Fx.Elements
- Drag
- Drag.Move
- Color
- Group
- Hash.Cookie
- Sortables
- Tips
- SmoothScroll
- Slider
- Scroller
- Assets
- Accordion
リストをドラッグ&ドロップでソートできるインターフェイスを生成します。
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)
ソートを可能にするハンドラにマウスイベントリスナーを添附します。
mySortables.attach();
ハンドラからマウスリスナーイベントを削除し、ソートできなくします。
mySortables.detach();
すでに存在するSortablesインスタンスにアイテムを追加します。
mySortables.addItems(item1[, item2[, item3[, ...]]]);
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インスタンスから1つ以上のアイテムを削除します。
mySortables.removeItems(item1[, item2[, item3[, ...]]]);
var mySortables = new Sortables('#list1, #list2'); var element1 = $('list1').getFirst(); var element2 = $('list2').getLast(); mySortables.removeItems(element1, element2).destroy(); //要素はリストから取り除かれ、削除されました。
すでに存在するSortablesインスタンスにアイテムを追加し、新しいリストと古いリストの間でソートができるようにします。
mySortables.addLists(list1[, list2[, list3[, ...]]]);
var mySortables = new Sortables('list1'); mySortables.addLists($('list2'));
リスト全体をSortablesインスタンスから取り除き、リスト間でのソートをできなくします。
mySortables.removeLists(list1[, list2[, list3[, ...]]]);
var mySortables = new Sortables('#list1, #list2'); mySortables.removeLists($('list2'));
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ライセンスで公表されています。