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

Re: Drag and drop in treeview

Expand Messages
  • harrierdh
    Try this function expandAllNode() { oCurrentTextNode.expandAll(); oCurrentTextNode.expand(); } function collapseAllNode() { oCurrentTextNode.collapseAll();
    Message 1 of 6 , May 31, 2007
    • 0 Attachment
      Try this
      function expandAllNode()
      {
      oCurrentTextNode.expandAll();
      oCurrentTextNode.expand();
      }

      function collapseAllNode()
      {
      oCurrentTextNode.collapseAll();
      oCurrentTextNode.collapse();
      }




      --- In ydn-javascript@yahoogroups.com, Nige White <nigelw@...> wrote:
      >
      > I have my page working quite well now. Right now, you can drag TO
      the
      > tree. Right clicking on a Menu node in the tree offers to create a
      new
      > submenu node. Right clicking on any non-root node offers to delete
      it.
      >
      > I plane to make tree nodes draggable inside the tree. I also plane
      to
      > make them renameable.
      >
      > You'll need the following extra code in the
      YAHOO.widget.Node.prototype
      > in treeview.js:
      >
      > /**
      > * Inserts a node into the child collection before an existing
      node.
      > *
      > * @param node {Node} the new node
      > * @param refNode {Node} the node to insert before
      > * @return {Node} the child node
      > */
      > insertBefore: function(node, refNode)
      > {
      > if (refNode)
      > {
      > var refIndex = this.contains(refNode);
      > if (refIndex != -1)
      > {
      > this.children.splice(refIndex, 0, node);
      > if (refNode.previousSibling)
      > refNode.previousSibling.nextSibling = node;
      > node.previousSibling = refNode.previousSibling;
      > node.nextSibling = refNode;
      > refNode.previousSibling = node;
      > this.tree.regNode(node);
      > this.childrenRendered = false;
      > }
      > return node;
      > }
      > return this.appendChild(node);
      > },
      >
      > /**
      > * Inserts a node into the child collection after an existing
      node.
      > *
      > * @param node {Node} the new node
      > * @param refNode {Node} the node to insert after
      > * @return {Node} the child node
      > */
      > insertAfter: function(node, refNode)
      > {
      > if (refNode)
      > {
      > var refIndex = this.contains(refNode);
      > if (refIndex != -1)
      > {
      > if (!refNode.nextSibling)
      > return this.appendChild(node);
      > this.children.splice(refIndex + 1, 0, node);
      > refNode.nextSibling.previousSibling = node;
      > node.previousSibling = refNode;
      > node.nextSibling = refNode.nextSibling;
      > refNode.nextSibling = node;
      > this.tree.regNode(node);
      > this.childrenRendered = false;
      > }
      > return node;
      > }
      > return this.appendChild(node);
      > },
      >
      > /**
      > * Returns true if the passed Node is a child of this Node
      > *
      > * @param node {Node} the Node to check
      > * @return {boolean} The node index if the Node is a child of
      this
      > Node, else -1.
      > * @private
      > */
      > contains: function(node)
      > {
      > for (var i = 0; i < this.children.length; i++)
      > if (this.children[i] == node)
      > return i;
      > return -1;
      > },
      >
      >
      >
      >
      > Then this extra code in dom.js:
      >
      > /**
      > * Returns true of this Region is above (centre has a lower y
      coordinate)
      > * than the passed Region.
      > *
      > * @param {YAHOO.util.Region} r The other Region, an element ID, an
      > element, or an [x, y] array.
      > * @return {boolean} true if this region is higher on the page than
      the
      > other region
      > */
      > YAHOO.util.Region.prototype.isAbove = function(r)
      > {
      > var thisCentre = this.top + ((this.bottom - this.top) / 2);
      > var otherCentre;
      > if (typeof r == "number")
      > otherCentre = r;
      > else if (r.constructor == Array)
      > otherCentre = r[1];
      > else
      > {
      > if (!(r.top && r.bottom))
      > r = YAHOO.util.Dom.getRegion(r)
      > otherCentre = r.top + ((r.bottom - r.top) / 2);
      > }
      > return thisCentre < otherCentre;
      > }
      > YAHOO.util.Region.prototype.isBelow = function(r)
      > {
      > return !this.isAbove(r);
      > }
      >
      > /**
      > * Returns true of this Region is left of (centre has a lower x
      coordinate)
      > * than the passed Region.
      > *
      > * @param {YAHOO.util.Region} r The other Region, an element ID, an
      > element, or an [x, y] array.
      > * @return {boolean} true if this region is further left on the
      page
      > than the other region
      > */
      > YAHOO.util.Region.prototype.isLeftOf = function(r)
      > {
      > var thisCentre = this.left + ((this.right - this.left) / 2);
      > var otherCentre;
      > if (typeof r == "number")
      > otherCentre = r;
      > else if (r.constructor == Array)
      > otherCentre = r[0];
      > else
      > {
      > if (!(r.left && r.right))
      > r = YAHOO.util.Dom.getRegion(r)
      > otherCentre = r.left + ((r.right - r.left) / 2);
      > }
      > return thisCentre < otherCentre;
      > }
      > YAHOO.util.Region.prototype.isRightOf = function(r)
      > {
      > return !this.isLeftOf(r);
      > }
      >
      >
      >
      > Then, put this html page into the examples/treeview directory:
      >
      > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
      > <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
      > <head>
      > <title>Yahoo! UI Library - Tree Control</title>
      > <script type="text/javascript"
      src="../../build/yahoo/yahoo.js"
      > ></script>
      > <script type="text/javascript"
      > src="../../build/event/event.js"></script>
      > <script type="text/javascript"
      > src="../../build/dom/dom.js"></script>
      > <script type="text/javascript"
      > src="../../build/connection/connection.js"></script>
      > <script type="text/javascript"
      > src="../../build/animation/animation.js"></script>
      > <script type="text/javascript"
      > src="../../build/dragdrop/dragdrop.js"></script>
      > <script type="text/javascript"
      > src="../../build/treeview/treeview.js" ></script>
      > <script type="text/javascript"
      > src="../../build/container/container.js" ></script>
      > <script type="text/javascript"
      src="../../build/menu/menu.js"
      > ></script>
      > <!-- CSS for Menu -->
      > <style type="text/css">
      > /*
      > Copyright (c) 2006, Yahoo! Inc. All rights reserved.
      > Code licensed under the BSD License:
      > http://developer.yahoo.net/yui/license.txt
      > */
      >
      >
      > /* Menu styles */
      > div.yuimenu {
      > z-index:1;
      > visibility:hidden;
      > background-color:#d0d0d0;
      > border: 2px solid;
      > border-color: #f0f0f0 #909090 #909090 #f0f0f0;
      > padding:1px;
      > }
      >
      >
      > /* MenuBar Styles */
      > div.yuimenubar {
      > background-color: #d0d0d0;
      > border: 2px solid;
      > border-color: #f0f0f0 #909090 #909090 #f0f0f0;
      > padding: 1px 4px 1px 4px;
      > }
      >
      > /*
      > Application of "zoom:1" triggers "haslayout" in IE so
      that
      > the module's
      > body clears its floated elements
      > */
      > div.yuimenubar div.bd {
      > zoom:1;
      > }
      >
      > /*
      > Clear the module body for other browsers
      > */
      > div.yuimenubar div.bd:after {
      > content:'.';
      > display:block;
      > clear:both;
      > visibility:hidden;
      > height:0;
      > }
      >
      > /* No downarrows */
      > li.yuimenubaritem > img[alt="Collapsed. Click to expand."],
      > li.yuimenubaritem > img[alt="Expanded. Click to collapse."]
      > {
      > display:none;
      > }
      >
      > /* Matches the group title (H6) inside a Menu or MenuBar
      instance */
      > div.yuimenu h6,
      > div.yuimenubar h6 {
      > font-size:100%;
      > font-weight:normal;
      > margin:0;
      > }
      >
      > div.yuimenubar h6 {
      > float:left;
      > display:inline; /* Prevent margin doubling in IE */
      > padding:4px 12px;
      > border-width:0 1px 0 0;
      > }
      >
      > div.yuimenu h6 {
      > float:none;
      > display:block;
      > border-width:1px 0 0 0;
      > padding:5px 10px 0 10px;
      > }
      >
      > /* Matches the UL inside a Menu or MenuBar instance */
      > div.yuimenubar ul {
      > list-style-type:none;
      > margin:0;
      > padding:0;
      > overflow:hidden;
      > }
      >
      > div.yuimenu ul {
      > list-style-type:none;
      > margin:0;
      > padding:0px 0px 2px 0px;
      > }
      >
      > div.yuimenu ul.first,
      > div.yuimenu ul.hastitle,
      > div.yuimenu h6.first {
      > border-width:0;
      > }
      >
      >
      > /* MenuItem and MenuBarItem styles */
      > div.yuimenubar li
      > {
      > padding:0px;
      > }
      >
      > div.yuimenu li
      > {
      > padding:2px 0px 2px 0px;
      > }
      >
      > div.yuimenu li,
      > div.yuimenubar li {
      > color: #000000;
      > cursor: default;
      > text-decoration: none;
      > white-space:nowrap;
      > text-align:left;
      > }
      >
      > div.yuimenu li.yuimenuitem {
      > }
      >
      > div.yuimenu li li,
      > div.yuimenubar li li {
      > font-size:100%;
      > }
      >
      >
      > /* Matches the help text for a MenuItem instance */
      > div.yuimenu li em {
      > font-style:normal;
      > margin:0 0 0 40px;
      > }
      >
      > div.yuimenu a em {
      > margin:0;
      > }
      >
      > li.yuimenubaritem > a {
      > padding:0px 8px 0px 8px;
      > display:table-cell;
      > line-height:1.5em;
      > border:1px solid #d0d0d0;
      > }
      >
      > li.yuimenuitem > a {
      > padding:0px 8px 0px 8px;
      > border:none;
      > }
      >
      > li.yuimenuitem > a,
      > li.yuimenubaritem > a {
      > /*
      > "zoom:1" triggers "haslayout" in IE to ensure that
      the
      > mouseover and
      > mouseout events bubble to the parent LI in IE.
      > */
      > zoom:1;
      > color:#000;
      > text-decoration:none;
      > outline:none!important;
      > }
      >
      > /* Mouse hovering over MenuBarItem: Outset border */
      > li.yuimenubaritem > a:hover {
      > border-color: #f0f0f0 #909090 #909090 #f0f0f0;
      > color:#000000;
      > }
      >
      > /* Mouse hovering over MenuBar: white text on blue
      background */
      > li.yuimenuitem.mouseover {
      > border:none;
      > background-color: #000070;
      > color:#ffffff;
      > }
      >
      > /* //\\ Patch from Todd.
      > //\\ Did not make a difference */
      > div.yuimenu li.yuimenuitem img {
      > margin:0 -16px 0 10px;
      > border:0;
      > }
      >
      > /* This (less pecific) rule was already present. (The above
      one
      > shou;d be the standard)
      > Matches the sub menu indicator for a MenuItem instance
      > div.yuimenu li img {
      > margin:0 -16px 0 10px;
      > border:0;
      > }*/
      >
      > div.yuimenu li.hassubmenu,
      > div.yuimenu li.hashelptext {
      > text-align:right;
      > }
      >
      > div.yuimenu li.hassubmenu a.hassubmenu,
      > div.yuimenu li.hashelptext a.hashelptext {
      > float:left;
      > display:inline; /* Prevent margin doubling in IE */
      > text-align:left;
      > }
      >
      >
      > /* Matches focused and selected MenuItem instances */
      >
      > div.yuimenubar li.yuimenubaritem.selected > a {
      > background-color: #a0a0a0;
      > border-color: #909090 #f0f0f0 #f0f0f0 #909090!important;
      > color:#000000;
      > }
      >
      > div.yuimenu li.yuimenuitem.selected {
      > background-color: #000070;
      > color:#ffffff;
      > }
      >
      > div.yuimenu li.selected a.selected,
      > div.yuimenu li.selected em.selected,
      > div.yuimenubar li.selected a.selected {
      > color:#fff;
      > }
      >
      >
      > /* Matches disabled MenuItem instances */
      > div.yuimenu li.disabled,
      > div.yuimenubar li.disabled {
      > cursor:default;
      > }
      >
      > div.yuimenu li.disabled a.disabled,
      > div.yuimenu li.disabled em.disabled,
      > div.yuimenubar li.disabled a.disabled {
      > color:#b9b9b9;
      > cursor:default;
      > }
      >
      > div.yuimenubar li.yuimenubaritem {
      > float:left;
      > display:inline; /* Prevent margin doubling in IE */
      > margin:0;
      > }
      >
      > div.yuimenubar li.yuimenubaritem.first {
      > border-width:0;
      > }
      >
      > div.yuimenubar li.yuimenubaritem img {
      > margin:0 0 0 10px;
      > vertical-align:middle;
      > }
      > </style>
      > <link rel="stylesheet" type="text/css"
      href="css/screen.css" />
      > <link rel="stylesheet" type="text/css"
      href="css/local/tree.css" />
      > <style type="text/css">
      > #menuContainer {
      > float:left;
      > border:2px inset;
      > overflow:auto;
      > }
      >
      > #componentContainer {
      > float:left;
      > border:2px inset;
      > overflow:auto;
      > }
      >
      > .Component {
      > background-color:lightblue;
      > border-bottom:1px groove;
      > }
      > </style>
      > <script type="text/javascript">
      > // Starting with the given node, find the nearest
      containing
      > element
      > // with the specified tag name and optionally class name.
      > function getAncestorWithClass(node, tagName, className)
      > {
      > var lcTag = tagName.toLowerCase();
      > while (node != null)
      > {
      > if (node.tagName != null && node.tagName.toLowerCase
      ()
      > == lcTag)
      > {
      > if (typeof(className) != "undefined")
      > {
      > if (YAHOO.util.Dom.hasClass(node,
      className))
      > {
      > return node;
      > }
      > }
      > else
      > {
      > return node;
      > }
      > }
      > node = node.parentNode;
      > }
      >
      > return node;
      > }
      >
      > var tree;
      > function onWindowLoad()
      > {
      > tree = new DDTreeView("menuTree");
      > var menuBar = new YAHOO.widget.TextNode
      ({label:"Nigel's
      > Menu", href:"#"}, tree.getRoot(), false);
      > menuBar.canHaveChildren = true;
      > menuBar.data =
      > {className:"com.fcl.greenfield.entity.Menu", uuid:0};
      > menuBar.expand();
      > tree.draw();
      >
      > // Activate the components...
      > var c = new Component("Component:1", "menuTree")
      > c.copy = true;
      > c.data =
      > {className:"com.fcl.greenfield.entity.Component", uuid:1};
      > c = new Component("Component:2", "menuTree")
      > c.copy = true;
      > c.data =
      > {className:"com.fcl.greenfield.entity.Component", uuid:2};
      > c = new Component("Component:3", "menuTree")
      > c.copy = true;
      > c.data =
      > {className:"com.fcl.greenfield.entity.Component", uuid:3};
      > }
      >
      > DDTreeView = function(id)
      > {
      > this.init(id);
      > this.insertHighlight = document.createElement
      ("div");
      > this.insertHighlight.style.display = "none";
      > this.insertHighlight.style.position = "absolute";
      > this.insertHighlight.style.backgroundColor =
      > "activecaption";
      > this.insertHighlight.style.height = "2px";
      > this.insertHighlight.style.width = "45px";
      > document.body.appendChild(this.insertHighlight);
      > this.newNodeCount = 0;
      > }
      > DDTreeView.prototype = new YAHOO.widget.TreeView();
      > DDTreeView.prototype.superDraw =
      DDTreeView.prototype.draw;
      >
      > DDTreeView.prototype.draw = function()
      > {
      > // Call superclass's draw()
      > this.superDraw();
      >
      > // Make the tree droppable on.
      > new YAHOO.util.DDTarget
      (this.id, "menuTree").menuTree =
      > this;
      >
      > // Create ContextMenu
      > this.contextMenu = new
      > YAHOO.widget.ContextMenu("contextMenu", {trigger:this.id});
      > this.createMenuItem = new
      > YAHOO.widget.ContextMenuItem("New Submenu");
      >
      > this.createMenuItem.clickEvent.subscribe(this.createNewMenu, this,
      true);
      > this.contextMenu.addItem(this.createMenuItem);
      > this.deleteMenuItem = new
      > YAHOO.widget.ContextMenuItem("Delete");
      >
      > this.deleteMenuItem.clickEvent.subscribe(this.deleteMenu, this,
      true);
      > this.contextMenu.addItem(this.deleteMenuItem);
      >
      > // Add a "move" event handler to the context menu
      >
      > this.contextMenu.beforeShowEvent.subscribe(this.onMoveContextMenu,
      this,
      > true);
      > this.contextMenu.render(document.body);
      > }
      >
      > // Given a target DOM element, work up to find its label,
      > // extract the node index, and look it up in the tree.
      > DDTreeView.prototype.getTreeNode = function(target)
      > {
      > var result = getAncestorWithClass
      (target, "a", "ygtvlabel");
      > if (result && result.id)
      > {
      > result = YAHOO.widget.TreeView.getNode(this.id,
      > parseInt(/ygtvlabelel(\d+)/.exec(result.id)[1]));
      > }
      > return result;
      > }
      >
      > DDTreeView.prototype.onMoveContextMenu = function(e, o)
      > {
      > var target =
      > this.getTreeNode(this.contextMenu.contextEventTarget);
      > if (target)
      > {
      > // Disable creation if we clicked on a node that
      > can't have children
      > this.createMenuItem.cfg.setProperty("disabled",
      > !target.canHaveChildren);
      >
      > // Disable deletion if we clicked on the top
      level Menu.
      > this.deleteMenuItem.cfg.setProperty("disabled",
      > (target.parent == this.getRoot()));
      > }
      > else
      > {
      > this.contextMenu.cfg.applyConfig
      ({visible:false });
      > }
      > YAHOO.util.Event.preventDefault(e);
      > }
      >
      > // Called from the context menu in the scope of the
      MenuTree
      > DDTreeView.prototype.createNewMenu = function(e, o)
      > {
      > var target =
      > this.getTreeNode(this.contextMenu.contextEventTarget);
      > if (target)
      > {
      > target.collapse();
      > var submenu = new YAHOO.widget.TextNode
      ({label: "New
      > Menu " + (++this.newNodeCount), href:"#"}, target, false);
      > submenu.canHaveChildren = true;
      > submenu.data =
      > {className:"com.fcl.greenfield.entity.Menu"}
      > target.expand();
      > }
      > this.contextMenu.hide();
      > }
      >
      > // Called from the context menu in the scope of the
      MenuTree
      > DDTreeView.prototype.deleteMenu = function(e, o)
      > {
      > var target =
      > this.getTreeNode(this.contextMenu.contextEventTarget);
      > if (target)
      > {
      > target.parent.collapse();
      > this.removeNode(target);
      > target.parent.expand();
      > }
      > this.contextMenu.hide();
      > }
      >
      > // Returns the lowest target node at the event's
      coordinates
      > DDTreeView.prototype.getInsertionPoint = function(e)
      > {
      > this.insertHighlight.style.display = "none";
      > var p = new
      > YAHOO.util.Point(YAHOO.util.Event.getPageX
      (e),YAHOO.util.Event.getPageY(e));
      > var c = this.getRoot().children;
      > for (var i = 0; i < c.length; i++)
      > {
      > var result = this._getInsertionPoint(c[i], p);
      > if (result)
      > return result;
      > }
      > }
      >
      > /** Returns an object representing the target node
      position
      > at the event's coordinates.
      >
      > The object is {root:nodeToInsertInto
      > beforeNode|afterNode:reference node to
      > insert before or after}
      > */
      > DDTreeView.prototype._getInsertionPoint = function
      (node, p)
      > {
      > // The region occupied by the label element.
      > var labelRegion =
      > YAHOO.util.Region.getRegion(node.getLabelEl());
      >
      > if (node.canHaveChildren)
      > {
      > // The element containing child nodes.
      > var childElement = node.getChildrenEl();
      >
      > // Get the region occupied by the child nodes.
      > var childRegion =
      > YAHOO.util.Region.getRegion(childElement);
      >
      > // Get the region occupied by the whole root
      line.
      > Ensure it's as wide as the tree
      > var rootRegion =
      > YAHOO.util.Region.getRegion(childElement.previousSibling);
      > var treeRegion =
      > YAHOO.util.Region.getRegion(node.tree.getRoot().getEl());
      > rootRegion.left = treeRegion.left;
      > rootRegion.right = treeRegion.right;
      >
      > // If we're over the label, we're inserting
      either at
      > the top,
      > // or, if it's a collapsed node and we're below
      its
      > centre line,
      > // below it.
      > if (rootRegion.contains(p))
      > {
      > this.insertHighlight.style.top =
      > (labelRegion.bottom + 5) + "px";
      > this.insertHighlight.style.left =
      > (labelRegion.left + 17) + "px";
      > this.insertHighlight.style.display = "";
      >
      > // If the node is expanded, we're inserting
      > before its first child.
      > if (node.expanded)
      > return {root:node,
      beforeNode:node.children[0]};
      > else
      > {
      > // If the node is collapsed, then decide
      > whether to insert
      > // AFTER it, or INTO it.
      > if (!node.parent.isRoot())
      > {
      > // Hovering within 4 pixels of the
      bottom
      > - insert AFTER it
      > if (p.top > (rootRegion.bottom - 5))
      > {
      > this.insertHighlight.style.left
      =
      > labelRegion.left + "px";
      > return {root:node.parent,
      > afterNode:node};
      > }
      >
      > // Insert INTO it: Hide insertion
      point bar
      > this.insertHighlight.style.display
      = "none";
      > }
      >
      > // Unless it's a top level, in which
      case
      > INTO it.
      > return {root:node, beforeNode:null};
      > }
      > }
      >
      > else if (childRegion.contains(p))
      > {
      > // var result;
      > for (var i = 0; i < node.children.length;
      i++)
      > {
      > var result =
      > this._getInsertionPoint(node.children[i], p);
      > if (result)
      > return result;
      > }
      > }
      > }
      >
      > // We're hovering over a leaf node.
      > else
      > {
      > var e = YAHOO.util.Region.getRegion(node.getEl
      ());
      > if (e.contains(p))
      > {
      > this.insertHighlight.style.left =
      > labelRegion.left + "px";
      > this.insertHighlight.style.display = "";
      > if (p.isAbove(e))
      > {
      > prevNode = node.previousSibling;
      > if (!prevNode)
      > prevNode = node.parent;
      > this.insertHighlight.style.top =
      > (YAHOO.util.Region.getRegion(prevNode.getLabelEl()).bottom + 5)
      + "px";
      > return {root:node.parent,
      beforeNode:node};
      > }
      > else
      > {
      > this.insertHighlight.style.top =
      > (labelRegion.bottom + 5) + "px";
      > return {root:node.parent,
      afterNode:node};
      > }
      > }
      > }
      > this.insertHighlight.style.display = "none";
      > }
      >
      > DDTreeView.prototype.insertTextNodeBefore = function
      (label,
      > refNode, expanded)
      > {
      > var root = refNode.parent;
      > var node = new
      > YAHOO.widget.TextNode({label:this.getEl().innerHTML, href:"#"},
      root,
      > false);
      > this.removeNode(node);
      > root.insertBefore(node, refNode);
      > return node;
      > }
      >
      > DDTreeView.prototype.insertTextNodeAfter = function
      (label,
      > refNode, expanded)
      > {
      > var root = refNode.parent;
      > var node = new
      > YAHOO.widget.TextNode({label:this.getEl().innerHTML, href:"#"},
      root,
      > false);
      > this.removeNode(node);
      > root.insertAfter(node, refNode);
      > return node;
      > }
      >
      > /**
      > Extends DDProxy to allow copying of data.
      > */
      > var Component = function(id, sGroup)
      > {
      > this.copy = false;
      > this.init(id, sGroup);
      > this.initFrame();
      > this.selectedTarget = null;
      > this.isTarget = false;
      > };
      > Component.prototype = new YAHOO.util.DDProxy();
      >
      > Component.prototype.initFrame = function()
      > {
      > if (!Component.frameDiv)
      > {
      > if (!document || !document.body)
      > {
      > _this = this;
      > setTimeout(function()
      > {
      > Component.prototype.initFrame.call
      (_this)
      > }, 50);
      > return;
      > }
      > this.setDragElId("componentProxy");
      > Component.frameDiv = document.createElement
      ("div");
      > Component.frameDiv.id = "componentProxy";
      > var s = Component.frameDiv.style;
      > s.position = "absolute";
      > s.visibility = "hidden";
      > s.border = "none";
      > s.zIndex = 999;
      > document.body.appendChild(Component.frameDiv);
      > }
      > this.useAbsMath = true;
      > };
      >
      > Component.prototype.getDragEl = function()
      > {
      > return Component.frameDiv;
      > }
      >
      > Component.prototype.showFrame = function(iPageX, iPageY)
      > {
      > var el = this.getEl();
      > var dragEl = Component.frameDiv;
      > YAHOO.util.Dom.setStyle(dragEl, "opacity", 0.5);
      > dragEl.className = el.className;
      > dragEl.innerHTML = el.innerHTML;
      > var s = dragEl.style;
      > s.width = parseInt(el.offsetWidth, 10) + "px";
      > s.height = parseInt(el.offsetHeight, 10) + "px";
      > this.setDragElPos(iPageX, iPageY);
      > s.visibility = "";
      > document.body.style.cursor = "no-drop";
      > };
      >
      > Component.prototype.onDragEnter = function(e, id)
      > {
      > document.body.style.cursor = "copy";
      > };
      >
      > Component.prototype.onDragOut = function()
      > {
      > document.body.style.cursor = "no-drop";
      > if (this.selectedTarget)
      > this.selectedTarget.style.backgroundColor = "";
      > tree.insertHighlight.style.display = "none";
      > };
      >
      > Component.prototype.b4EndDrag = function()
      > {
      > this.getDragEl().style.visibility = "hidden";
      > if (this.selectedTarget)
      > this.selectedTarget.style.backgroundColor = "";
      > document.body.style.cursor = "";
      > };
      >
      > Component.prototype.onDragOver = function(e, id)
      > {
      > var menuTree = ((typeof id == "string") ?
      > YAHOO.util.DragDropMgr.getDDById(id) : id[0]).menuTree;
      > var insertionPoint = menuTree.getInsertionPoint(e);
      > if (insertionPoint)
      > {
      > var el = insertionPoint.root.getLabelEl();
      > if (this.selectedTarget &&
      (this.selectedTarget != el))
      > {
      > this.selectedTarget.style.backgroundColor
      = "";
      > }
      > this.selectedTarget = el;
      > this.selectedTarget.style.backgroundColor
      = "#ccddcc";
      > }
      > }
      >
      > Component.prototype.onDragDrop = function(e, id)
      > {
      > var menuTree = ((typeof id == "string") ?
      > YAHOO.util.DragDropMgr.getDDById(id) : id[0]).menuTree;
      > var insertionPoint = menuTree.getInsertionPoint(e);
      > if (insertionPoint)
      > {
      > if (insertionPoint.afterNode)
      > {
      > var n = new
      > YAHOO.widget.TextNode({label:this.getEl().innerHTML, href:"#"},
      > insertionPoint.root, false);
      > menuTree.removeNode(n);
      > insertionPoint.root.insertAfter(n,
      > insertionPoint.afterNode);
      > }
      > else
      > {
      > var n = new
      > YAHOO.widget.TextNode({label:this.getEl().innerHTML, href:"#"},
      > insertionPoint.root, false);
      > menuTree.removeNode(n);
      > insertionPoint.root.insertBefore(n,
      > insertionPoint.beforeNode);
      > }
      > n.data = this.data;
      > insertionPoint.root.refresh();
      >
      > // We've moved, not copied, so remove the
      original
      > node, and clear it's DragDrop
      > if (!this.copy)
      > {
      > var el = this.getDragEl();
      > el.parent.removeChild(el);
      > this.unreg();
      > }
      >
      > }
      > };
      >
      > // Don't remove the original node.
      > Component.prototype.endDrag = function()
      > {
      > tree.insertHighlight.style.display = "none";
      > };
      >
      > // Add a "load" handler for the window
      > YAHOO.util.Event.addListener(window, "load",
      onWindowLoad);
      >
      > </script>
      > </head>
      > <body>
      > <form id="mainForm">
      > <div id="menuContainer"
      > style="height:400px;width:300px;margin-right:10px;overflow:auto">
      > <a href="javascript:tree.expandAll()">Expand all</a>
      > <a href="javascript:tree.collapseAll()">Collapse
      all</a>
      > <div id="menuTree"></div>
      > </div>
      > <div id="componentContainer"
      style="height:400px;width:300px">
      > <div style="text-align:center">Components</div>
      > <div id="components">
      > <div class="Component"
      id="Component:1">Languages</div>
      > <div class="Component"
      id="Component:2">Countries</div>
      > <div class="Component" id="Component:3">Time
      zones</div>
      > </div>
      > </form>
      > </body>
      > </html>
      >
      >
      _____________________________________________________________________
      > This message has been checked for all known viruses. Virus scanning
      > powered by Messagelabs http://www.messagelabs.com For more
      information
      > e-mail : hostmaster@...
      >
    Your message has been successfully submitted and would be delivered to recipients shortly.