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

Re: [ydn-javascript] How can I swap divs with Yahoo! UI?

Expand Messages
  • 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 1 of 3 , Apr 2 6:50 PM
    View Source
    • 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.