sortable_elementのオプション

Ruby on Rails

久々の更新になってしまった...。ちょっと、別件で集中してやってみたいことがあったのだ。そして、気付いてみたら、前回から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!

以下も関連あり