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

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

Expand Messages
  • Eric Miraglia
    Apr 2, 2007

      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)
              var proxyid = proxy.id;
              var id = this.id;
              a.onComplete.subscribe(function() {
                      Dom.setStyle(proxyid, "visibility", "hidden");
                      Dom.setStyle(id, "visibility", "");

      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.


      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

    • Show all 3 messages in this topic