Rails / Sortable trees

From WhyNotWiki

Jump to: navigation, search

Contents

[edit]

Most of this is a specialization of Rails / Sortable lists.

[edit] Scriptaculous's Sortable's tree:true option

Demo: http://script.aculo.us/playground/test/functional/sortable_tree_test.html

Also here: http://svn.tylerrick.com/public/rails/examples/ajax/ajax_examples/app/views/scriptaculous_sortables/tree.rhtml

It's really neat! But... I found it a bit hard to use, actually. Too easy to accidentally move a node up or down a level to a different subtree. Having whole (large) subtrees bumping down dynamically to make room for the element I'm dragging is kind of "neat", but quite distracting and confusing, especially since it does this for every single element as you drag over it, which means it's doing it for a lot of elements...

Conclusion: Don't use the tree:true option. I think generally I would prefer to only allow "easy"/"quick" re-ordering (using the Scriptaculous "Sortable") for nodes at the same level. The user interface to move a node to a different subtree can be accomplished with "plain old" Draggables -- only updating the view after the Ajax request (to assign a new parent) has been processed and the server responds with some RJS to update the view.

A bit laggy perhaps, but it's better than having the [skitterish] feeling of having everything constantly moving/jumping around as you're dragging a node. Ideally, it would be updated on the client-side immediately and then maybe highlighted when the Ajax request completes, but I don't (currently) how easy that would be...

[edit] Sur's AjaxTree

Source Code For Ajax Based Drag Drop Navigation Tree in Ruby on Rails (http://ajaxonrails.wordpress.com/2006/08/18/sorce-code-for-ajax-based-drag-drop-navigation-tree-for-rails/) (2006-11-26). Retrieved on 2007-05-11 11:18.


...

http://ajaxonrails.wordpress.com/2006/11/26/ajaxonrailsdragdroptree/ (the source code for the above)

http://svn.tylerrick.com/public/rails/examples/ajaxtree

Comments:

  • You can drag and drop a node to a different parent but not to a different position (well, of course, because it doesn't even keep track of position -- it uses acts_as_tree, which is an unordered tree)
  • It has +/- icons for each node that let you collapse/expand that subtree
  • When you drag and drop, it reloads the entire tree, expanding the subtree that you dropped onto and collapsing all (non-ancestor) trees.
  • There is no indication when you are over a droppable element.
  • Bug: If you drag onto a collapsed node (say 'item4'), it won't just add it as a child of item4, but will actually add it as a child of the last child of item4, which is item4.3 in the demo.
  • By the author's own admission [1], this code has "lagged behind the current trends followed in Rails development" and he was new to Rails when he started it, so it may not use the best conventions...

[edit] Sortable tree addition / discussion on Rails-spinoffs list

http://lists.rubyonrails.org/pipermail/rails-spinoffs/2006-March/002890.html [Rails-spinoffs] sortable tree?

http://wrath.rubyonrails.org/pipermail/rails-spinoffs/2006-February/subject.html#2632 The Rails-spinoffs February 2006 Archive by subject

[edit] sortable tree fix and enhancement for acts_as_nested_set+better_nested_set plugin

star_full.gif star_full.gif star_empty.gif

http://dev.rubyonrails.org/ticket/7807

  1. 7807 ([PATCH] Sortable tree fixes for #4691 (adding sub-items to empty branches)) - Rails Trac - Trac


1. #4691 fix: you may add any branch under any node and, thus, create new branch. 2. acts_as_nested_set & better_nested_set plugin integration. onChange provides 2 more arguments: movement type and reference object (drop-on-element). Three movements are supported: "left_to", "right_to" and "to_child_of".

http://dev.rubyonrails.org/attachment/ticket/7807/sortable_tree_fix_and_enhancement.2.diff

Personal tools