mootools 元素追加_使用MooTools 1.2交换元素位置

mootools 元素追加

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可以制作一些非常棒的动画。 如果我们要快速建立两个元素互换位置而又不用大惊小怪怎么办？ 现在，您可以通过实现MooTools swap()方法。

View Demo 观看演示

MooTools 1.2实施 (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用法 (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!

要调用swap方法，只需传递第二个元素和过渡速度并观察元素的交换位置！

View Demo 观看演示

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

您将用它做什么？ 实用还是娱乐？

翻译自: https://davidwalsh.name/element-position-swap-mootools

mootools 元素追加