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

執筆者:

関連記事

Rails4.0でもajaxなデータテーブルを使う~ajax-datatables

Railsでajaxなテーブルを使う~datatables Rails4でのJSONテンプレート~jbuilder+rabl+ruby 目次1 index.json.jbuilder2 tasks.j …

Rails3.2+Mongoidでログイン機能~devise

  目次1 Gemfile2 generate3 model4 試す5 Login/Logout6 アクセス制限7 メニュー構成を整える8 翻訳 I18n9 見た目を整える Gemfile …

no image

MongoidでMapReduceに挑戦中

MongoDBの薄い本の素材をMongoidでやろうとしたけど途中経過 MapReduceをやることの利点は、並列処理ができるということとSQLより柔軟な処理なできるということらしい(MongoDBに …

RailsにTwitter Bootstrapを設定する~twitter-bootstrap-rails

環境 ruby 1.9.3  & rails 3.2.8 適当なscaffoldを作っておく

  github.co …

backbone-relationalをJasmineでテストしてみた