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

執筆者:

関連記事

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

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

全文検索エンジンGroongaをRubyから利用するライブラリのチュートリアルをやってみた〜rroonga

By: Kevin Jarrett – CC BY 2.0 目次1 Groonga2 Groongaのインストール3 rroongaのインストール4 チュートリアルの開始5 データベースの …

Railsでajaxなテーブルを使う~datatables

    github.com/rweng/jquery-datatables-rails 目次1 Gemfile2 application.js3 application.css4 …

ActionCableのサンプルをみてみた

By: Samantha Brough – CC BY 2.0 目次1 ActionCableとは2 rails4での利用3 redisサーバーの準備4 cableサーバーの準備5 チャッ …

Rails3.2のアプリをデプロイ~apache+passenger+postgresql

  環境 ubuntu server 12.04 目次1 postgresql2 apache+passenger3 デプロイ準備 postgresql インストール 参照 Ubuntu s …