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

Re: How can I swap divs with Yahoo! UI?

Expand Messages
  • John Vieth
    Just testing the reply feature. This discussion group interface is funky.
    Message 1 of 3 , Apr 2, 2007
    • 0 Attachment
      Just testing the reply feature. This discussion group interface is funky.

      --- In ydn-javascript@yahoogroups.com, "John Vieth" <linux4all@...> wrote:
      >
      > I've got Yahoo! UI JavaScript working. I can drag and drop, use the
      > onDragOver and onDragOut events, set custom handles, etc. Now I'd
      > like to animate divs so that, when a div is dropped, it automatically
      > goes back to its original location *IF* it is not dropped on a valid
      > target. If it *IS* dropped on a valid target, I would like to swap
      > the div that is being dragged with the target div so that the dragged
      > div moves to the targets original coordinates and the target moves to
      > the dragged div's original coordinates before it was dragged. Can
      > anyone explain how to do this in a nutshell or point me to a specific
      > resource? I've check Yahoo! UI's home page, but I could find an
      > example that calls out this specific functionality. Please advise,
      > and thank you in advance for any assistance. - John
      >
    • Eric Miraglia
      John, You could do something like this in your onInvalidDrop method, if you are using DDProxy: var srcEl = this.getEl(); var proxy = this.getDragEl();
      Message 2 of 3 , Apr 2, 2007
      • 0 Attachment
        John,

        You could do something like this in your onInvalidDrop method, if you are using DDProxy:

                var srcEl = this.getEl();
                var proxy = this.getDragEl();
                Dom.setStyle(proxy, "visibility", "visible");

                // animate the proxy element to the src element's location
                var a = new YAHOO.util.Motion( 
                    proxy, { 
                        points: { 
                            to: Dom.getXY(srcEl)
                        }
                    }, 
                    0.3, 
                    YAHOO.util.Easing.easeOut 
                )
                var proxyid = proxy.id;
                var id = this.id;
                a.onComplete.subscribe(function() {
                        Dom.setStyle(proxyid, "visibility", "hidden");
                        Dom.setStyle(id, "visibility", "");
                    });
                a.animate();

        Note: This is cribbed from the Sortable List example.

        If you're using DD instead of DDProxy, then you need to modify this.  If the position of your dragged element is relative, then you can usually just animate "top" and "left" to 0 to get the effect you're after.

        Regards,
        Eric

        ______________________________________________
        Eric Miraglia
        Yahoo! User Interface Library



        On Apr 2, 2007, at 9:08 AM, John Vieth wrote:

        I've got Yahoo! UI JavaScript working. I can drag and drop, use the
        onDragOver and onDragOut events, set custom handles, etc. Now I'd
        like to animate divs so that, when a div is dropped, it automatically
        goes back to its original location *IF* it is not dropped on a valid
        target. If it *IS* dropped on a valid target, I would like to swap
        the div that is being dragged with the target div so that the dragged
        div moves to the targets original coordinates and the target moves to
        the dragged div's original coordinates before it was dragged. Can
        anyone explain how to do this in a nutshell or point me to a specific
        resource? I've check Yahoo! UI's home page, but I could find an
        example that calls out this specific functionality. Please advise,
        and thank you in advance for any assistance. - John


      Your message has been successfully submitted and would be delivered to recipients shortly.