InquiryLabs
Politics, Programming and Possibilities
A mooTools Draggable Tree
Author: Duane Johnson14 Feb
Here’s a javascript drag-and-drop tree similar to the DHTML Goodies one, but based heavily on the nicely designed mooTools library. I built this tree as a part of my work at FamilyLearn.
Plug: If you’d like to take a peek at what we’re doing, check out our new iMemoryBook publishing platform.
Features of DraggableTree
- Drag-and-drop rearranging of any standard UL list
- In-place editing of nodes
- Easily mark certain nodes as non-editable or non-copyable (default is editable and copyable).
Enjoy!
Demo is here.
12 Responses for "A mooTools Draggable Tree"
Well done. You forgot the download link though.
Nice. Is there a way to limit where something can be placed? For example, if you had
Entity
Company1
employee1
employee2
Company2
You might want to move an employee from Company2 to Company1, but not make them a root in the tree.
I should have made that more clear.
If you had
Entity
Company1
employee1
employee2
Company2
Entity2
Company3
Company4
And you want an employee to be able to be moved from one company to another within the same entity, but not moved to another entity.
Now the real question is — how can I plug this into Rails to make my Web 2.0 mindmap killer app?
Alex: The demo is the download. Sorry for the ambiguity.
tj: I haven’t designed it the way you describe, but I think i should be easily adapted to your contraints. If you hit on something that could cover a broad set of constraints, let me know.
The code breaks on the newer version of mootools. Guess the DraggableTree.paddingLeft is the source of the problems, where is paddingLeft comming from?
Jan-Willem: Strange that that’s not working in a newer version… the paddingLeft is an *assignment*, so I would expect it to just work (javascript is a prototype-based language, so there is no need to “define” a property of an object, simple assignment works).
SO that leads me to wonder if something more fundamental has changed that is causing this. Unfortunately, I don’t have time to really look in to this.
If you would like a much more robust DraggableTree class, I would encourage you to take a look at http://yootools.net/tree.html. I’ve spent a lot more time putting this new one together, and there are a number of features not present in the original mootools DraggableTree. I know switching to yootools is not for everyone, however, so it’s up to you!
.
the link http://seri.ous.ly/draggable_tree/ doesn’t work. Can You put some other link with demo this Tree?
You can browse site in web archive here http://web.archive.org/web/20070620134254/http://seri.ous.ly/draggable_tree/
@Denis: Thanks, I thought I’d lost it.
Leave a reply