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

Drag and Drop problem

Expand Messages
  • Patrick Buller
    I am new to javascript and the YUI library, but have had fairly good success so far except for this problem. I am trying to use drag and drop, and I am having
    Message 1 of 5 , Dec 31, 2007
    • 0 Attachment
      I am new to javascript and the YUI library, but have had fairly good
      success so far except for this problem. I am trying to use drag and
      drop, and I am having trouble getting one of the examples to work. I am
      am trying to use the Custom Click Validator example because I want to
      emulate the dragged item returning to its starting position. Here is the
      code:

      <tr STYLE='display:none' id='row0'><td><img style='width:175px'
      id='image0' src='image0.jpg'>

      YAHOO.util.Event.onDOMReady(function() {
      var Dom=YAHOO.util.Dom;
      var Im0 = Dom.get("image0");
      var startPos = Dom.getXY(Im0);

      DDpickup = new YAHOO.util.DD("image0");

      var DDbefore = new YAHOO.util.DDTarget("beforedrop");
      var DDafter = new YAHOO.util.DDTarget("afterdrop");

      DDpickup.onDragDrop = function(e, id) {
      Dom.setXY(Im0, startPos);
      //Dom.setXY(this.getEl(), startPos); <-- also does not work
      }
      });

      I use the another event to make the row visible, and that works fine.
      The image is dragable, but I cannot seem to get the image to go back. I
      have also tried using setDelta, but this does not seem to
      do anything. Is this because the image is not visible when the page is
      loaded? If so, is there a way around this?

      Thanks for your help,
      Patrick
    • dav.glass@yahoo.com
      Patrick -- I think your issue is that you are calling getXY on the image when the image is styled as display none. The tr above the image is not technically
      Message 2 of 5 , Dec 31, 2007
      • 0 Attachment
        Patrick --

        I think your issue is that you are calling getXY on the image when the image is styled as display none. The tr above the image is not "technically" in the document, so getXY will fail.

        Hope that helps :)
        Dav
         
        Dav Glass
        dav.glass@...
        blog.davglass.com
         
         
        + Windows: n. - The most successful computer virus, ever. +
        + A computer without a Microsoft operating system is like a dog
        without bricks tied to its head +
        + A Microsoft Certified Systems Engineer is to computing what a
        McDonalds Certified Food Specialist is to fine cuisine +


        ----- Original Message ----
        From: Patrick Buller <pbuller@...>
        To: ydn-javascript@yahoogroups.com
        Sent: Monday, December 31, 2007 10:21:56 AM
        Subject: [ydn-javascript] Drag and Drop problem

        I am new to javascript and the YUI library, but have had fairly good
        success so far except for this problem. I am trying to use drag and
        drop, and I am having trouble getting one of the examples to work. I am
        am trying to use the Custom Click Validator example because I want to
        emulate the dragged item returning to its starting position. Here is the
        code:

        <tr STYLE='display:none' id='row0'><td><img style='width:175px'
        id='image0' src='image0.jpg'>

        YAHOO.util.Event.onDOMReady(function() {   
                    var Dom=YAHOO.util.Dom;
                    var Im0 = Dom.get("image0");
                    var startPos = Dom.getXY(Im0);
                 
                    DDpickup = new YAHOO.util.DD("image0"); 
                     
                    var DDbefore = new YAHOO.util.DDTarget("beforedrop");
                    var DDafter = new YAHOO.util.DDTarget("afterdrop");
                 
                    DDpickup.onDragDrop = function(e, id) {
                        Dom.setXY(Im0, startPos);
                        //Dom.setXY(this.getEl(), startPos); <-- also does not work
                        }
                });

        I use the another event to make the row visible, and that works fine.
        The image is dragable, but I cannot seem to get the image to go back.   I
        have also tried using setDelta, but this does not seem to
        do anything. Is this because the image is not visible when the page is
        loaded? If so, is there a way around this?

        Thanks for your help,
        Patrick                                                 



        Yahoo! Groups Links

        <*> To visit your group on the web, go to:
            http://groups.yahoo.com/group/ydn-javascript/

        <*> Your email settings:
            Individual Email | Traditional

        <*> To change settings online go to:
            http://groups.yahoo.com/group/ydn-javascript/join
            (Yahoo! ID required)

        <*> To change settings via email:
            mailto:ydn-javascript-digest@yahoogroups.com
            mailto:ydn-javascript-fullfeatured@yahoogroups.com

        <*> To unsubscribe from this group, send an email to:
            ydn-javascript-unsubscribe@yahoogroups.com

        <*> Your use of Yahoo! Groups is subject to:
            http://docs.yahoo.com/info/terms/


      • Patrick Buller
        Yes, that is the problem. I removed the display:none property and the drag and drop works fine. Is there a way to add the element to the document so getXY will
        Message 3 of 5 , Jan 2, 2008
        • 0 Attachment
          Yes, that is the problem. I removed the display:none property and the
          drag and drop works fine. Is there a way to add the element to the
          document so getXY will work. I have looked through the dom collection
          and only find inDocument?

          Thank you,
          Patrick Buller

          dav.glass@... wrote:
          > Patrick --
          >
          > I think your issue is that you are calling getXY on the image when the
          > image is styled as display none. The tr above the image is not
          > "technically" in the document, so getXY will fail.
          >
          > Hope that helps :)
          > Dav
          >
          > Dav Glass
          > dav.glass@...
          > blog.davglass.com
          >
          >
          > + Windows: n. - The most successful computer virus, ever. +
          > + A computer without a Microsoft operating system is like a dog
          > without bricks tied to its head +
          > + A Microsoft Certified Systems Engineer is to computing what a
          > McDonalds Certified Food Specialist is to fine cuisine +
          >
          >
          > ----- Original Message ----
          > From: Patrick Buller <pbuller@...>
          > To: ydn-javascript@yahoogroups.com
          > Sent: Monday, December 31, 2007 10:21:56 AM
          > Subject: [ydn-javascript] Drag and Drop problem
          >
          > I am new to javascript and the YUI library, but have had fairly good
          > success so far except for this problem. I am trying to use drag and
          > drop, and I am having trouble getting one of the examples to work. I am
          > am trying to use the Custom Click Validator example because I want to
          > emulate the dragged item returning to its starting position. Here is the
          > code:
          >
          > <tr STYLE='display:none' id='row0'><td><img style='width:175px'
          > id='image0' src='image0.jpg'>
          >
          > YAHOO.util.Event.onDOMReady(function() {
          > var Dom=YAHOO.util.Dom;
          > var Im0 = Dom.get("image0");
          > var startPos = Dom.getXY(Im0);
          >
          > DDpickup = new YAHOO.util.DD("image0");
          >
          > var DDbefore = new YAHOO.util.DDTarget("beforedrop");
          > var DDafter = new YAHOO.util.DDTarget("afterdrop");
          >
          > DDpickup.onDragDrop = function(e, id) {
          > Dom.setXY(Im0, startPos);
          > //Dom.setXY(this.getEl(), startPos); <-- also does not
          > work
          > }
          > });
          >
          > I use the another event to make the row visible, and that works fine.
          > The image is dragable, but I cannot seem to get the image to go back. I
          > have also tried using setDelta, but this does not seem to
          > do anything. Is this because the image is not visible when the page is
          > loaded? If so, is there a way around this?
          >
          > Thanks for your help,
          > Patrick
          >
          >
          >
          > Yahoo! Groups Links
          >
          >
          > (Yahoo! ID required)
          >
          > mailto:ydn-javascript-fullfeatured@yahoogroups.com
          > <mailto:ydn-javascript-fullfeatured@yahoogroups.com>
          >
          >
          >
          >
        • dav.glass@yahoo.com
          Removing the display none puts it in the document. Try using visibility: hidden. Dav Dav Glass dav.glass@yahoo.com blog.davglass.com + Windows: n. - The most
          Message 4 of 5 , Jan 2, 2008
          • 0 Attachment

            Removing the display" none puts it in the document. Try using visibility: hidden.

            Dav
             
            Dav Glass
            dav.glass@...
            blog.davglass.com
             
             
            + Windows: n. - The most successful computer virus, ever. +
            + A computer without a Microsoft operating system is like a dog
            without bricks tied to its head +
            + A Microsoft Certified Systems Engineer is to computing what a
            McDonalds Certified Food Specialist is to fine cuisine +


            ----- Original Message ----
            From: Patrick Buller <pbuller@...>
            To: ydn-javascript@yahoogroups.com
            Sent: Wednesday, January 2, 2008 5:38:57 AM
            Subject: Re: [ydn-javascript] Drag and Drop problem

            Yes, that is the problem. I removed the display:none property and the
            drag and drop works fine. Is there a way to add the element to the
            document so getXY will work. I have looked through the dom collection
            and only find inDocument?

            Thank you,
            Patrick Buller

            dav.glass@... wrote:
            > Patrick --
            >
            > I think your issue is that you are calling getXY on the image when
            the
            > image is styled as display none. The tr above the image is not
            > "technically" in the document, so getXY will fail.
            >
            > Hope that helps :)
            > Dav

            > Dav Glass
            > dav.glass@...
            > blog.davglass.com


            > + Windows: n. - The most successful computer virus, ever. +
            > + A computer without a Microsoft operating system is like a dog
            > without bricks tied to its head +
            > + A Microsoft Certified Systems Engineer is to computing what a
            > McDonalds Certified Food Specialist is to fine cuisine +
            >
            >
            > ----- Original Message ----
            > From: Patrick Buller <pbuller@...>
            > To:
            ymailto="mailto:ydn-javascript@yahoogroups.com" href="mailto:ydn-javascript@yahoogroups.com">ydn-javascript@yahoogroups.com
            > Sent: Monday, December 31, 2007 10:21:56 AM
            > Subject: [ydn-javascript] Drag and Drop problem
            >
            > I am new to javascript and the YUI library, but have had fairly good
            > success so far except for this problem. I am trying to use drag and
            > drop, and I am having trouble getting one of the examples to work. I
            am
            > am trying to use the Custom Click Validator example because I want to
            > emulate the dragged item returning to its starting position. Here is
            the
            > code:
            >
            > <tr STYLE='display:none' id='row0'><td><img style='width:175px'
            > id='image0' src='image0.jpg'>
            >
            > YAHOO.util.Event.onDOMReady(function() { 
            >            var Dom=YAHOO.util.Dom;
            >            var Im0 = Dom.get("image0");
            >            var startPos = Dom.getXY(Im0);
            >         
            >            DDpickup = new YAHOO.util.DD("image0");
            >             
            >            var DDbefore = new YAHOO.util.DDTarget("beforedrop");
            >            var DDafter = new YAHOO.util.DDTarget("afterdrop");
            >         
            >            DDpickup.onDragDrop =
            function(e, id) {
            >                Dom.setXY(Im0, startPos);
            >                //Dom.setXY(this.getEl(), startPos); <-- also does
            not
            > work
            >                }
            >        });
            >
            > I use the another event to make the row visible, and that works fine.
            > The image is dragable, but I cannot seem to get the image to go back.
              I
            > have also tried using setDelta, but this does not seem to
            > do anything. Is this because the image is not visible when the page
            is
            > loaded? If so, is there a way around this?
            >
            > Thanks for your help,
            > Patrick                                               
            >
            >
            >
            > Yahoo! Groups Links
            >
            >
            >    (Yahoo! ID required)
            >
            >    mailto:ydn-javascript-fullfeatured@yahoogroups.com
            > <mailto:ydn-javascript-fullfeatured@yahoogroups.com>
            >
            >
            >





            Yahoo! Groups Links

            <*> To visit your group on the web, go to:
                http://groups.yahoo.com/group/ydn-javascript/

            <*> Your email settings:
                Individual Email | Traditional

            <*> To change settings online go to:
                http://groups.yahoo.com/group/ydn-javascript/join
                (Yahoo! ID required)

            <*> To change settings via email:
                mailto:ydn-javascript-digest@yahoogroups.com
                mailto:ydn-javascript-fullfeatured@yahoogroups.com

            <*> To unsubscribe from this group, send an email to:
                ydn-javascript-unsubscribe@yahoogroups.com

            <*> Your use of Yahoo! Groups is subject to:
                http://docs.yahoo.com/info/terms/


          • Patrick Buller
            Yes, that works. Thank you for your help. -Patrick
            Message 5 of 5 , Jan 7, 2008
            • 0 Attachment
              Yes, that works. Thank you for your help. -Patrick

              dav.glass@... wrote:
              >
              > Removing the display" none puts it in the document. Try using
              > visibility: hidden.
              >
              > Dav
              >
              > Dav Glass
              > dav.glass@...
              > blog.davglass.com
              >
              >
              > + Windows: n. - The most successful computer virus, ever. +
              > + A computer without a Microsoft operating system is like a dog
              > without bricks tied to its head +
              > + A Microsoft Certified Systems Engineer is to computing what a
              > McDonalds Certified Food Specialist is to fine cuisine +
              >
              >
              > ----- Original Message ----
              > From: Patrick Buller <pbuller@...>
              > To: ydn-javascript@yahoogroups.com
              > Sent: Wednesday, January 2, 2008 5:38:57 AM
              > Subject: Re: [ydn-javascript] Drag and Drop problem
              >
              > Yes, that is the problem. I removed the display:none property and the
              > drag and drop works fine. Is there a way to add the element to the
              > document so getXY will work. I have looked through the dom collection
              > and only find inDocument?
              >
              > Thank you,
              > Patrick Buller
              >
              > dav.glass@... <mailto:dav.glass@...> wrote:
              > > Patrick --
              > >
              > > I think your issue is that you are calling getXY on the image when the
              > > image is styled as display none. The tr above the image is not
              > > "technically" in the document, so getXY will fail.
              > >
              > > Hope that helps :)
              > > Dav
              > >
              > > Dav Glass
              > > dav.glass@... <mailto:dav.glass@...>
              > > blog.davglass.com <http://blog.davglass.com>
              > >
              > >
              > > + Windows: n. - The most successful computer virus, ever. +
              > > + A computer without a Microsoft operating system is like a dog
              > > without bricks tied to its head +
              > > + A Microsoft Certified Systems Engineer is to computing what a
              > > McDonalds Certified Food Specialist is to fine cuisine +
              > >
              > >
              > > ----- Original Message ----
              > > From: Patrick Buller <pbuller@...
              > <mailto:pbuller@...>>
              > > To: ydn-javascript@yahoogroups.com
              > <mailto:ydn-javascript@yahoogroups.com>
              > > Sent: Monday, December 31, 2007 10:21:56 AM
              > > Subject: [ydn-javascript] Drag and Drop problem
              > >
              > > I am new to javascript and the YUI library, but have had fairly good
              > > success so far except for this problem. I am trying to use drag and
              > > drop, and I am having trouble getting one of the examples to work. I am
              > > am trying to use the Custom Click Validator example because I want to
              > > emulate the dragged item returning to its starting position. Here is the
              > > code:
              > >
              > > <tr STYLE='display:none' id='row0'><td><img style='width:175px'
              > > id='image0' src='image0.jpg'>
              > >
              > > YAHOO.util.Event.onDOMReady(function() {
              > > var Dom=YAHOO.util.Dom;
              > > var Im0 = Dom.get("image0");
              > > var startPos = Dom.getXY(Im0);
              > >
              > > DDpickup = new YAHOO.util.DD("image0");
              > >
              > > var DDbefore = new YAHOO.util.DDTarget("beforedrop");
              > > var DDafter = new YAHOO.util.DDTarget("afterdrop");
              > >
              > > DDpickup.onDragDrop = function(e, id) {
              > > Dom.setXY(Im0, startPos);
              > > //Dom.setXY(this.getEl(), startPos); <-- also does not
              > > work
              > > }
              > > });
              > >
              > > I use the another event to make the row visible, and that works fine.
              > > The image is dragable, but I cannot seem to get the image to go
              > back. I
              > > have also tried using setDelta, but this does not seem to
              > > do anything. Is this because the image is not visible when the page is
              > > loaded? If so, is there a way around this?
              > >
              > > Thanks for your help,
              > > Patrick
              > >
              > >
              > >
              > > Yahoo! Groups Links
              > >
              > >
              > > (Yahoo! ID required)
              > >
              > > mailto:ydn-javascript-fullfeatured@yahoogroups.com
              > <mailto:ydn-javascript-fullfeatured@yahoogroups.com>
              > > <mailto:ydn-javascript-fullfeatured@yahoogroups.com
              > <mailto:ydn-javascript-fullfeatured@yahoogroups.com>>
              > >
              > >
              > >
              > >
              >
              >
              >
              >
              > Yahoo! Groups Links
              >
              >
              > (Yahoo! ID required)
              >
              > mailto:ydn-javascript-fullfeatured@yahoogroups.com
              > <mailto:ydn-javascript-fullfeatured@yahoogroups.com>
              >
              >
              >
              >
            Your message has been successfully submitted and would be delivered to recipients shortly.