Re: YUI Treeview with Drag and Drop
Drag and drop can be done with treeview. I just recently implemented
it (both dragging nodes within the tree as well as in and out of the
The steps are basically:
1) Make the labels draggable with DDProxy (and setup the drop
targets). This basically just means you're moving around a virtual
copy of the node's label.
2) On the dropEvent, determine the source and drop target, and then
use that to programatically move the node.
One thing I'd caution you on though is that although the initial setup
is fairly easy, after you refresh a node to update the screen of any
changes you may have made to it or its children, all of the drag drop
stuff on those nodes become stale and stop working. The reason for
this is that the child nodes are (re)injected in with the innerHTML
method which re-creates the elements...
The example in this URL actually subclassed the treeview to handle the
above mentioned refresh issue. I took a different approach so I can't
say if it works or not, but it seems to. It is based on 2.5.1 though...
I based much of my logic off this example (albeit with textNode instead):
But then had to jump through hoops to handle refreshing. You can see
some more detail here:
Satyam suggested that I just monitor the treeview itself (instead of
each individual node/label) and rely on bubbling. I haven't looked
into this approach yet as my solutions appears to be working fine
(with about 200-300 nodes) and would require extra doing given the
additional logic in my tree (several different node types with special
logic for each). I believe that his solution would still require
messing with the DragDropManager's drop targets regardless.
> Hi, all:
> Is it possible to integrate YUI treeview and drag and drop behavior?
> Or, how do developers design the function of node movement in YUI tree?
> Any example or demo will be better.
> Thanks in advance.