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

How can I swap divs with Yahoo! UI?

Expand Messages
  • John Vieth
    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
    Message 1 of 3 , Apr 2, 2007
    • 0 Attachment
      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
    • John Vieth
      Just testing the reply feature. This discussion group interface is funky.
      Message 2 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 3 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.