wwwendt.de/tech/dynatree/doc/dynatree-doc.html
wwwendt.de/tech/dynatree/doc/samples.html
今日はドラッグアンドドロップをやってみた
やることは
- dynatreeのドラッグアンドドロップの設定
- ajaxでの内容のupdate
dynatreeのドラッグアンドドロップの設定
これはdnd:オプションを設定すればよい.
たくさんイベント関連の関数があるが最低限うごかすには3つ設定する必要がある.
(マニュアルだとonDragStartとonDropの２つだけど、onDragEnterでnodeをとらないとonDropイベントが発生しなかった)
1 2 3 4 5 6 7 8 | dnd: onDragStart: (node) -> console.log "drag! #{node}" return true onDragEnter: (node, sourceNode) -> return true onDrop: (node, sourceNode, hitMode, ui, draggable) -> sourceNode.move(node, hitMode) |
うえの２つで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のコールバック関数を次のように設定した
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | onDrop: (node, sourceNode, hitMode, ui, draggable) -> parent_key = node.data.key parent_id = parent_key.replace('key', '') key = sourceNode.data.key id = key.replace('key', '') title = sourceNode.data.title name = title.replace(/^.*: /, '') sourceNode.move(node, hitMode) $.ajax type: "PUT" url: "folders/#{id}.json" data: folder: id: id name: name parent_folder_id: parent_id dataType: 'json' success: (msg) -> alert ("Data Save: #{msg}") |
