Element Position Swapping Using MooTools 1.2

By  on  

We all know that MooTools 1.2 can do some pretty awesome animations. What if we want to quickly make two element swap positions without a lot of fuss? Now you can by implementing a MooTools swap() method.

MooTools 1.2 Implementation

Element.implement({
	swap: function(other,speed) {
		
		//get the position
		position1 = this.getCoordinates();
		position2 = other.getCoordinates();
		
		//position this where it is
		this.setStyles({
			top: position1.top + 'px',
			left: position1.left + 'px',
			position: 'absolute'
		});
		
		//position the other element where it is
		other.setStyles({
			top: position2.top + 'px',
			left: position2.left + 'px',
			position: 'absolute'
		});
		
		//fx
		var myFx = new Fx.Morph(this,{
			duration: speed
		}).start({
			'top': position2.top + 'px',
			'left': position2.left + 'px'
		});
		
		//fx
		var myFx2 = new Fx.Morph(other,{
			duration: speed
		}).start({
			'top': position1.top + 'px',
			'left': position1.left + 'px'
		});
	}
});

MooTools 1.2 Usage

window.addEvent('domready', function() {
	//swap the two elements when a trigger is clicked
	$('trigger').addEvent('click',function(e) {
		$('element1').swap($('element2'),300);
	});
});

To call the swap method, simply pass the second element and transition speed and watch the element swap position!

What would you use this for? Anything practical or just for fun?

Recent Features

  • By
    Serving Fonts from CDN

    For maximum performance, we all know we must put our assets on CDN (another domain).  Along with those assets are custom web fonts.  Unfortunately custom web fonts via CDN (or any cross-domain font request) don't work in Firefox or Internet Explorer (correctly so, by spec) though...

  • By
    I’m an Impostor

    This is the hardest thing I've ever had to write, much less admit to myself.  I've written resignation letters from jobs I've loved, I've ended relationships, I've failed at a host of tasks, and let myself down in my life.  All of those feelings were very...

Incredible Demos

  • By
    MooTools ASCII Art

    I didn't realize that I truly was a nerd until I could admit to myself that ASCII art was better than the pieces Picasso, Monet, or Van Gogh could create.  ASCII art is unmatched in its beauty, simplicity, and ... OK, well, I'm being ridiculous;  ASCII...

  • By
    Introducing MooTools ElementSpy

    One part of MooTools I love is the ease of implementing events within classes. Just add Events to your Implements array and you can fire events anywhere you want -- these events are extremely helpful. ScrollSpy and many other popular MooTools plugins would...

Discussion

  1. I’m using firefox 3 and when i click swap, the height of the main div or something that’s holding that thing drops by half.

    Oh and double click causes also a bug with the starting-ending position of those boxes
    If you continue to double-click eventually those two boxes stay in the same place.

    I mean no harm, i just wanted you to know this :D

  2. @Elmas: Thank you for your comment.

    The “main div” bug is caused by changing the elements to “absolute” positioning — I’m still contemplating whether or not to change the elements to relative positioning when the move is complete.

    The “double-click” issue, technically, isn’t a bug because the items do switch places during the click. I may, however, add some sort of “lock” option.

  3. Michael

    Can you do something similar using floats? I’ve never fully understood why these kind of animations require absolute or relative positioning.

  4. Catar4x

    Good effect, I think that I use this effect for a inventory in PHP Game.
    Thanks ;)

  5. @David
    Very cool method. I think changing the position from absolute to relative isn’t the way to go. Because the markup for the two elements wouldn’t have changed, thus causing the elements to snap to a different position based on their new left and top values. Have you tried just swapping the left and top values and keeping the element position:relative intead of making them absolute?

    As for a ‘lock’ option, since you’re using Fx.Morph, Fx has a link option that you can set to ignore, thus applying the lock option.

    @Michael
    I think you can still do this with floats. The reason why position relative/absolute is required is because left, top, right, bottom only work on elements with the position style.

  6. Abba Bryant

    This would work as a visual cue for moving list items from one list to the other. Create the element as an overlay to the li’s, swap them and destroy them.

    I am sure there is a better use for it, but that is what popped into my head when I saw it.

  7. good tips,thanks for sharing.

  8. chintan

    hey i want to swap the elements of the webpage.. means to swap position of two images on some event… how is it posiible using javascript..

  9. hey david i got few questions for you !!! hope you can answer me :)

    is it possible to move fixed div ?

    and

    how can i do to move more than to object on a single click ?

    thks !

  10. fred

    other than postion swap, how about Dom index swap

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!