Railsで使えるGem

Rails3.2でajaxなフォルダツリーを導入する4~dynatree-rails & Drag’n’Drop

投稿日:2012年11月29日 更新日:

wwwendt.de/tech/dynatree/doc/dynatree-doc.html

wwwendt.de/tech/dynatree/doc/samples.html

今日はドラッグアンドドロップをやってみた

やることは

  1. dynatreeのドラッグアンドドロップの設定
  2. ajaxでの内容のupdate

dynatreeのドラッグアンドドロップの設定

これはdnd:オプションを設定すればよい.
たくさんイベント関連の関数があるが最低限うごかすには3つ設定する必要がある.
(マニュアルだとonDragStartとonDropの2つだけど、onDragEnterでnodeをとらないとonDropイベントが発生しなかった)

うえの2つでtrueを返せばonDropイベントが発生した.仕組みはまだよくわかっていない.

ajaxでの内容のupdate

これで見た目は子ノードが新しい親の下に移動する

だがしかし、Railsのデータも更新する必要がある

onDropイベントが起きたとき、ajaxで指定のアドレスをPUTしてデータを送ればRailsがデータを更新してくれる

ただし、PUTイベントを扱わないブラウザもあるようなので注意

stackoverflow.com/questions/907910/how-do-i-put-data-to-rails-using-jquery

nodeが落ちた先の親ノード、sourceNodeがドラッグされたノードなので、onDropのコールバック関数を次のように設定した

 情報

Railsでawesome_nested_setとjsTreeでインタラクティブにツリー構造を操作する

-Railsで使えるGem
-,

執筆者:

関連記事

状況に応じてRailsのフォームの種類を変える

By: Heidi De Vries – CC BY 2.0 目次1 前提2 仕様の決定3 正規表現の変更4 メタプログラミング第一歩5 helper6 view7 できた8 できてない9 …

Rails3.2でリアルタイムメッセージング~Private_pub、Faye

  Railsで簡単に非同期通信ができるPrivate_pubというgemを試した もともとrubyにはFayeという非同期通信ができるgemがあったが、簡単に安全な接続ができる実装を加えた …

Rails4とBootstrapをつかった動的なナビゲーションとパンくずリスト〜acts_as_nested_set

By: anko.gaku_ula – CC BY 2.0 目次1 Railscast2 acts_as_nested_set3 ヘッダーnav4 サイドメニュー5 パンくずリスト6 でき …

RailsでECサイト構築~spree

  *インストール方法を書き換えました.前の方法だとアドミンユーザーが登録されませんでした. 今回はインストール+日本語化だけ 目次1 インストール2 日本語化 インストール gem [cr …

no image

Mongoidのandとorで悩み中

and

or

  orの方はハッシュで[crayon-5b …