sortable_elementのオプション
久々の更新になってしまった...。ちょっと、別件で集中してやってみたいことがあったのだ。そして、気付いてみたら、前回から1ヶ月も経過していた。1ヶ月前を思い出しながら、気を取り直して、続けます。だいぶ忘れているので、まずはsortable_elementのオプションについて、思い出しながらまとめ。未だ、分からないことも多い...。
オプション | デフォルト値 | 自分の理解 |
---|---|---|
tag | li | ここでliと指定されているので、liタグがドラッグ可能な要素になるようだ。デモ>> |
only | 指定したclass属性のアイテムのみ並べ替え対象になる。デモ>> | |
constraint | vertical | verticalが指定されていると、ドラッグした時に垂直方向に制限された動きしか出来ない。falseを指定すれば、縦横自在にドラッグ可能になる。デモ>> |
overlap | vertical | 並び替えリストの方向を垂直、水平で指定する。('vertical'、'horizontal')デモ>> |
containment | 複数のulタグのid属性を配列で指定すると、そのid属性で指定されたulリスト間を移動可能になる。デフォルトでは(何も指定が無い状態では)、異なるulリストへの移動は出来ない。デモ>> | |
format | /^[^_\-](?:[A-Za-z0-9\-\_]*)[_](.*)$/ | ここで指定された正規表現によって、liタグのid属性からインデックス情報を分離しているようだ。 |
handle | 通常、liタグ全体どこを掴んでもドラッグ状態になるが、ここでclass属性を指定することで、掴むことが出来るのは、liタグ中のそのclass属性の部分だけになる。デモ>> | |
hoverclass | :hoverclass=>"'over'"のようにクラス名をクォーテーションで囲った状態で指定する。ドラッグしたアイテムがliタグの上に重なった時、class='over'属性が追加される。デモ>> | |
ghosting | false | trueにすると、ドラッグ元のアイテムが最初の位置に残ったままドラッグ状態になる。ドロップするまでリスト構成が変化しない。デモ>> |
dropOnEmpty | false | trueにすると、ulタグの中身が空の状態でもドロップ可能になる。デモ>> |
scroll | 指定したid属性のブロック内で、表示範囲外にドラッグ中に自動スクロールする。デモ>> | |
scrollSensitivity | 20 | scrollを指定した場合の、自動スクロールが開始される上下のエリアの大きさ。 |
scrollSpeed | 15 | scrollを指定した場合の、自動スクロールの速さ。 |
tree | false | trueにすると、ulタグをツリー構造と認識して、親子孫...要素間の移動が可能になる。 |
treeTag | ul | ここでulと指定されているので、ulタグをツリーとして認識してくれるようだ。 |
onChange | ドラッグ中に並び順が変化した時に、ドラッグ中のエレメント情報と共に呼び出される。デモ>> | |
onUpdate | ドロップした時に、リスト全体のエレメント情報と供に呼び出される。sortable_elementデフォルトの挙動が上書きされてしまう。デモ>> |
GUIの操作というのは、文字を読んでもピンと来ない。そんなときは、サンプルコードで試してみるのが分かり易い。
# コントローラー def sort render :text => params.inspect end
<%# ビュー %> <ul id='sort1'> <li id='item_1'>item_1</li> <li id='item_2'>item_2</li> <li id='item_3'>item_3</li> <li id='item4'>item4</li> <li id='item_test'>item_test</li> <li id='item_test_6'>item_test_6</li> </ul> <br /> <ul id='sort2'> <li id='item_7'><span class="handle">ここを掴む</span>item_7</li> <li id='item_8'><span class="handle">ここを掴む</span>item_8</li> <li id='item_9'><span class="handle">ここを掴む</span>item_9</li> </ul> <%= sortable_element 'sort1', :update=>'info1', :url=>{:action=>'sort'}, #:overlap=>'horizontal', :constraint=>false, :containment=>['sort1','sort2'], :handle=>'handle', :hoverclass=>"'over'", #:ghosting=>true, #:dropOnEmpty=>true %> <%= sortable_element 'sort2', :update=>'info2', :url=>{:action=>'sort'}, #:overlap=>'horizontal', :constraint=>false, :containment=>['sort1','sort2'], :handle=>'handle', :hoverclass=>"'over'", :ghosting=>true, :dropOnEmpty=>true %> <div id="info1"></div> <div id="info2"></div>
-
-
- :hoverclass=>"'over'"のように、クォーテーションで囲ったオプション値を指定することに気付かず、ハマることが意外と多い。気を付けよう!
-
参考ページ
Many Thanks!
以下も関連あり