Loading ...
Sorry, an error occurred while loading the content.

Re: YUI Treeview with Drag and Drop

Expand Messages
  • plaakmann
    Caxton, 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 tree). The
    Message 1 of 3 , Oct 31, 2008
    • 0 Attachment
      Caxton,

      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
      tree).

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

      http://andrewroth.ca/others/treeview_dragdrop/

      I based much of my logic off this example (albeit with textNode instead):

      http://sonjayatandon.com/08-2006/how-to-add-dragdrop-behavior-to-a-yui-tree/

      But then had to jump through hoops to handle refreshing. You can see
      some more detail here:
      http://tech.groups.yahoo.com/group/ydn-javascript/message/39891

      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.


      --- In ydn-javascript@yahoogroups.com, "Caxton" <ivy_ckf@...> wrote:
      >
      > 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.
      >
      > Regards,
      >
      > Caxton
      >
    Your message has been successfully submitted and would be delivered to recipients shortly.