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でECサイト構築~spree

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

RailsでECサイト構築4 確認メールを送る~spree

  spreeでは注文したときと発送したときにメールを送信できるように設定できるので、やってみた   目次1 設定2 翻訳 設定 管理画面から設定>メールシステムの設定から これで …

Rails4.1に対応したRefinery CMS 3.0を試してみた

By: Alexis Madrigal – CC BY 2.0 目次1 Refinery CMS2 Gemfile3 generate4 configファイル5 起動6 管理画面7 トラブ …

簡単にグラフが作成できるC3.jsをRailsでつかってみた

By: Nguyen Hung Vu – CC BY 2.0 目次1 C3.js2 gon3 複数の時系列データで一方にはある時点のデータがあるけど他方にはある時点のデータがないみたいな場 …

Rails3.2でページネーションをTwitter Bootstrapに対応させる~kaminari

github.com/amatsuda/kaminari 目次1 Gemfile & bundle2 設置3 テーマの作成 Gemfile & bundle [crayon-5c154 …