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
-,

執筆者:

関連記事

FullCalendarのagendaViewでselectの場所がずれる問題

  By: Ben Piddington 前回 Rails3.2でGoogle Calendarライクなカレンダーを使う〜fullcalendar-rails   gemは最新の1 …

RailsでECサイト構築6 固定ページを作る~spree

  ECサイトを作成するときには日本の法律にしたがって色々と表示しなければならない 表示しなければならないことについては次のページが詳しかった 本サイトについて 実際のECサイトをみれば実例 …

Rubyでデータクリーニング~mechanize & active_support

  オライリー・ジャパンから「d3をはじめよう」という本が発売されたので読んだ 棒グラフ、折れ線グラフ、インタラクション(マウスオーバーで丸が大きくなるとかラベル表示とか、横のリストからグラ …

多対多の関係でまだ関連を持っていない候補を探す〜active_record、pluck、not in

By: Kevin Dooley – CC BY 2.0 目次1 前提2 やりたいこと3 解4 解説 前提 PersonとProjectは、ProjectsPersonという中間モデル(テ …

RubyでWebを操作できるMechanizeの利用例を集めてみた

By: nubobo – CC BY 2.0 目次1 公式2 使い方など3 リンク 公式 mechanize.rubyforge.org/ 使い方など Mechanize について 楽々ス …