What you probably want is Fx.Move from MooTools More. Here's a fiddle I put together from the unit tests:
http://jsfiddle.net/GhJcn/ Note that the code in this demo is a little convoluted because it's from our test environment. The parts you care about are these: //center $('box').move({ignoreMargins: true, relativeTo: $('foo')}); //upper left to upper left $('box').move({ignoreMargins: true,relativeTo: $('foo'), position: 'upperLeft'}); //bottom right to bottom right $('box').move({ignoreMargins: true,relativeTo: $('foo'), position: 'bottomRight',edge: 'bottomRight'}); etc You'll want to clone it as Sanford suggests probably. On Fri, Feb 3, 2012 at 10:37 AM, Sanford Whiteman <[email protected]>wrote: > > I think it should be accomplished with absolute positioning and telling > the > > div to go to another div that's already in the rendered page. Does my > logic > > makes sense? > > Sure. > > I'm too busy to put up your demo for you, but an easy way: > > · Abso the target div (the shopping cart) to a container > > · Abso the product image to the same container > > · When someone adds to cart, clone the product image to the > dotted-border box that represents the product flying through space (or > just unhide an existing flying-box) > > · Fx.Morph the height, width, top, and left of the flying-box to the > h/w/t/l of the shopping cart so that it appears to be "tractor-beamed" > to the box > > · Fade out the flying-box as you visually add the product to the cart > > -- S. > >
