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

Treeview and drag-and-drop

Expand Messages
  • Nige White
    I m trying to implement copying between treeviews. I m just modifying treeview/example/js/default.html for now, and adding HTMLNodes as leaf nodes. I add the
    Message 1 of 6 , Feb 27, 2006
    • 0 Attachment
      I'm trying to implement copying between treeviews. I'm just modifying
      treeview/example/js/default.html for now, and adding HTMLNodes as leaf
      nodes.

      I add the code "new YAHOO.util.DD(id)" using the id of the HTMLNode, but
      it doesn't allow pickup of the node.

      What's wrong?

      _____________________________________________________________________
      This message has been checked for all known viruses. Virus scanning
      powered by Messagelabs http://www.messagelabs.com For more information
      e-mail : hostmaster@...
    • Adam Moore
      ... Hi Nige, The HTML is not inserted into the document until its parent is expanded the first time. You should wait until you know the element is available
      Message 2 of 6 , Feb 27, 2006
      • 0 Attachment
        On Mon, Feb 27, 2006 at 01:06:33PM +0000, Nige White wrote:
        > I'm trying to implement copying between treeviews. I'm just modifying
        > treeview/example/js/default.html for now, and adding HTMLNodes as leaf
        > nodes.
        >
        > I add the code "new YAHOO.util.DD(id)" using the id of the HTMLNode, but
        > it doesn't allow pickup of the node.
        >
        > What's wrong?

        Hi Nige, The HTML is not inserted into the document until its parent is
        expanded the first time. You should wait until you know the element is
        available to enable drag and drop for the node. One possibility is to do
        this when the element receives its first mouseover event. Something like
        this:

        var counter = 0;
        function buildRandomHTMLBranch(node) {
        var id = "htmlnode_" + counter++;

        var html = '<div id="' + id + '"' +
        ' onmouseover="enableDragDrop(this, \'' + id + '\')"' +
        ' style="border:1px solid #aaaaaa; ' +
        ' position:relative; ' +
        ' height:100px; width:200px; ' +
        ' margin-bottom:10px; ' +
        ' background-color: #c5dbfc">' +
        'Info ' + id + '</div>';

        new YAHOO.widget.HTMLNode(html, node, false, false);
        }

        function enableDragDrop(el, id) {
        new YAHOO.util.DD(id);
        el.onmouseover = null;
        }
      • Nige White
        ... Ah, thanks for that, I ve added the call in the onmouseover. Now, the problem is, it only does anything when I use YAHOO.util.DDProxy() It then drags the
        Message 3 of 6 , Feb 28, 2006
        • 0 Attachment
          Adam Moore wrote:

          > On Mon, Feb 27, 2006 at 01:06:33PM +0000, Nige White wrote:
          > > I'm trying to implement copying between treeviews. I'm just modifying
          > > treeview/example/js/default.html for now, and adding HTMLNodes as leaf
          > > nodes.
          > >
          > > I add the code "new YAHOO.util.DD(id)" using the id of the HTMLNode,
          > but
          > > it doesn't allow pickup of the node.
          > >
          > > What's wrong?
          >
          > Hi Nige, The HTML is not inserted into the document until its parent is
          > expanded the first time.


          Ah, thanks for that, I've added the call in the onmouseover.

          Now, the problem is, it only does anything when I use YAHOO.util.DDProxy()

          It then drags the proxy div with the outline around the page. When I use
          YAHOO.util.DD(), it won't pick up.

          I'm noticing this in another test I'm doing where I'm trying to drag a
          <tr> between tables. Some extra code is needed to drag <tr>s. A proxy
          <table> object has to be created, sized, and styled, and the <tr>
          copied to it so that the <table> is dragged. Will it be possible to me
          to extend one of the provided objects to make a DragTable object as a
          "host" for a draggable <tr>?

          Also, how do I process a drop event? How do I register to be aware of
          it, and how do I process the objects to remove the correct node from its
          original position, and insert the correct node into its new position?

          Nige


          _____________________________________________________________________
          This message has been checked for all known viruses. Virus scanning
          powered by Messagelabs http://www.messagelabs.com For more information
          e-mail : hostmaster@...
        • Adam Moore
          ... Nige, to use YAHOO.util.DD, you ll need to have a position:relative style on the elements you wish to drag. I don t recommend this for your situation.
          Message 4 of 6 , Feb 28, 2006
          • 0 Attachment
            On Tue, Feb 28, 2006 at 09:22:20AM +0000, Nige White wrote:
            > Ah, thanks for that, I've added the call in the onmouseover.
            >
            > Now, the problem is, it only does anything when I use YAHOO.util.DDProxy()
            >
            > It then drags the proxy div with the outline around the page. When I use
            > YAHOO.util.DD(), it won't pick up.
            >
            > I'm noticing this in another test I'm doing where I'm trying to drag a
            > <tr> between tables. Some extra code is needed to drag <tr>s. A proxy
            > <table> object has to be created, sized, and styled, and the <tr>
            > copied to it so that the <table> is dragged. Will it be possible to me
            > to extend one of the provided objects to make a DragTable object as a
            > "host" for a draggable <tr>?
            >
            > Also, how do I process a drop event? How do I register to be aware of
            > it, and how do I process the objects to remove the correct node from its
            > original position, and insert the correct node into its new position?
            >

            Nige, to use YAHOO.util.DD, you'll need to have a position:relative
            style on the elements you wish to drag. I don't recommend this for your
            situation. DDProxy is usually more suited to situations where you are
            moving an element that is in the document flow.

            Please check out the drag and drop docs for info about how to respond to
            drag and drop events events:

            http://developer.yahoo.net/yui/dragdrop/

            The sortable list example is the closest to what you are trying to do. It
            uses DDProxy, and swaps the node positions in the onDragOver event handler.
            You probably want to do the same type of thing, except in the onDragDrop
            handler.


            -Adam
          • Marius Andreiana
            Hi Nige, Have you had any progress with treeview and drag-and-drop ? I m trying to create one too. Thanks, Marius ... YAHOO.util.DDProxy() ... I use ... drag a
            Message 5 of 6 , Apr 4, 2006
            • 0 Attachment
              Hi Nige,

              Have you had any progress with treeview and drag-and-drop ?
              I'm trying to create one too.

              Thanks,
              Marius

              --- In ydn-javascript@yahoogroups.com, Adam Moore <adamoore@...> wrote:
              >
              > On Tue, Feb 28, 2006 at 09:22:20AM +0000, Nige White wrote:
              > > Ah, thanks for that, I've added the call in the onmouseover.
              > >
              > > Now, the problem is, it only does anything when I use
              YAHOO.util.DDProxy()
              > >
              > > It then drags the proxy div with the outline around the page. When
              I use
              > > YAHOO.util.DD(), it won't pick up.
              > >
              > > I'm noticing this in another test I'm doing where I'm trying to
              drag a
              > > <tr> between tables. Some extra code is needed to drag <tr>s. A proxy
              > > <table> object has to be created, sized, and styled, and the <tr>
              > > copied to it so that the <table> is dragged. Will it be possible
              to me
              > > to extend one of the provided objects to make a DragTable object as a
              > > "host" for a draggable <tr>?
              > >
              > > Also, how do I process a drop event? How do I register to be aware of
              > > it, and how do I process the objects to remove the correct node
              from its
              > > original position, and insert the correct node into its new position?
              > >
              >
              > Nige, to use YAHOO.util.DD, you'll need to have a position:relative
              > style on the elements you wish to drag. I don't recommend this for
              your
              > situation. DDProxy is usually more suited to situations where you are
              > moving an element that is in the document flow.
              >
              > Please check out the drag and drop docs for info about how to respond to
              > drag and drop events events:
              >
              > http://developer.yahoo.net/yui/dragdrop/
              >
              > The sortable list example is the closest to what you are trying to
              do. It
              > uses DDProxy, and swaps the node positions in the onDragOver event
              handler.
              > You probably want to do the same type of thing, except in the onDragDrop
              > handler.
              >
              >
              > -Adam
              >
            • Nige White
              ... No, I went for the table based option that I posted up a while ago. The application problem I was solving in that case was not really tree based. I am
              Message 6 of 6 , Apr 4, 2006
              • 0 Attachment
                Marius Andreiana wrote:

                > Hi Nige,
                >
                > Have you had any progress with treeview and drag-and-drop ?
                > I'm trying to create one too.

                No, I went for the table based option that I posted up a while ago. The
                application problem I was solving in that case was not really tree based.

                I am definitely going to need drag and drop trees soo though. Our menu
                creation (allowing the user to build menu columns, submenus etc by
                dragging pre-defined components) will be a tree view.

                Keep us posted with your progress.

                Nige


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