[jQuery] Swap Element Positions

[Brian Miller]

I'm looking for a jQuery version of this script, that doesn't use jQueryUI: http://davidwalsh.name/element-position-swap-mootools

It animates and swaps 2 elements.

Thanks

[joddie191]

Something along the lines of

	(function( $ ){
		$.fn.swap = function(other,speed) {
			//get the position
			var position1 = this.offset();
			var position2 = other.offset();

			//position this where it is
			this.css({
				top: position1.top + 'px',
				left: position1.left + 'px',
				position: 'absolute'
			});

			//position the other element where it is
			other.css({
				top: position2.top + 'px',
				left: position2.left + 'px',
				position: 'absolute'
			});

			this.animate({
				'top': position2.top + 'px',
				'left': position2.left + 'px'
			}, speed, function() {
					// Animation complete.
			});

			other.animate({
				'top': position1.top + 'px',
				'left': position1.left + 'px'
			}, speed, function() {
				// Animation complete.
			});
		};
	})( jQuery );

	//add animate when we clicky trigger
	$('#trigger').click(function(e) {
					$('#element1').swap($('#element2'),300);
				});

[Guest]

$(document).ready(function()
{
	$('#startAnimation').click(function()
	{
		$('#item1').animate({
			top: $('.item:eq(1)').css('top'),
			left: $('.item:eq(1)').css('left')
		}, 500);

		$('#item2').animate({
			top: $('.item:eq(0)').css('top'),
			left: $('.item:eq(0)').css('left')
		}, 500);
	});
});

Was bored in work and remember seeing this topic before I left this morning... said i'd give it a go. Beaten to the punch it seems :p

[joddie191]

  On 12/08/2011 at 10:10, Quigley Guy said:

$(document).ready(function()
{
	$('#startAnimation').click(function()
	{
		$('#item1').animate({
			top: $('.item:eq(1)').css('top'),
			left: $('.item:eq(1)').css('left')
		}, 500);

		$('#item2').animate({
			top: $('.item:eq(0)').css('top'),
			left: $('.item:eq(0)').css('left')
		}, 500);
	});
});

Was bored in work and remember seeing this topic before I left this morning... said i'd give it a go. Beaten to the punch it seems :p

I also saw this at work and though it would be a good excuse to finally check out jQuery. Made me wanna marry jQuery though, and divorce Dojo

[Guest]

Just put up the full code on JS Fiddle :)

[Brian Miller]

Thanks Quigley Guy,

What if the "Items" were staked on top of one another with relative positions, and they were of varying heights, would that still work?

[Brian Miller]

Here's my latest attempt at hacking your codes:

http://jsfiddle.net/kESHy/17/

Not really making much progress...

[Guest]

  On 12/08/2011 at 16:07, Brian Miller said:

Thanks Quigley Guy,

What if the "Items" were staked on top of one another with relative positions, and they were of varying heights, would that still work?

You had to go and be awkward now didn't ya :D

Here you go anyway...

[Brian Miller]

Thanks,

What if .item was positioned as relative?

This screenshot shows kind of what I'm aiming for:

[Brian Miller]

So hears my code so far: http://jsfiddle.net/LYc3E/3/

I've not been able to include all your cool visual animations because I've been having problems with the absolute positioning.

Can someone try to put that in for me?

Remember, Paragraph 1 and Paragraph 2 shoudl not jump or jitter, if you don't know the height or the top location of the DIVs.

[Brian Miller]

Updated: http://jsfiddle.net/LYc3E/8/

[Brian Miller]

I've not been making any good progress with combining Quigley Guy's code with mine :-(

Help me!

[Guest]

$(document).ready(function()
{
    var animationSteps = 0;
    var animationInProgress = false;

    $('#item-queue').css('height', $('#item-queue').height());

    $('#item-queue .item').each(function()
    {
        var top = 0;

        $(this).prevAll().each(function() {
            top += $(this).outerHeight();
        });

        $(this).css('top', top + 'px');
        $(this).css('position', 'absolute');
    });

    $('#item-queue .item .arrow').click(function()
    {
        if(animationInProgress == false)
        {
            var item = $(this).parent();
            var direction = ($(this).hasClass('up') ? 'up' : 'down');

            if(direction == 'up' && $(item).attr('data-order') > 1)
            {
                var swap = $('.item[data-order="' + (parseInt($(item).attr('data-order'), 10) - 1) + '"]');
                moveItem(item, swap, direction);
            }
            else if(direction == 'down' && $(item).attr('data-order') != $('#item-queue').children().length)
            {
                var swap = $('.item[data-order="' + (parseInt($(item).attr('data-order'), 10) + 1) + '"]');
                moveItem(item, swap, direction);
            }
        }
    });

    function moveItem(item, swap, direction)
    {
        animationInProgress = true;

        var itemTop = 0;
        var swapTop = 0;

        if(direction == 'up')
        {
            itemTop = parseInt($(item).css('top'), 10) - $(swap).outerHeight();
            swapTop = parseInt($(swap).css('top'), 10) + $(item).outerHeight();
        }
        else if(direction == 'down')
        {
            itemTop = parseInt($(item).css('top'), 10) + $(swap).outerHeight();
            swapTop = parseInt($(swap).css('top'), 10) - $(item).outerHeight();
        }

        $(item).animate({
            top: itemTop + 'px'
        }, 500, function()
        {
            animationSteps++;
            if(animationSteps == 2) resetAnimationValues();
        });

        $(swap).animate({
            top: swapTop + 'px'
        }, 500, function()
        {
            animationSteps++;
            if(animationSteps == 2) resetAnimationValues();
        });

        var swapValue = $(item).attr('data-order');

        $(item).attr('data-order', $(swap).attr('data-order'));
        $(swap).attr('data-order', swapValue);
    }

    function resetAnimationValues()
    {
        animationSteps = 0;
        animationInProgress = false;
    }
});

now...

All items are displayed normally on the page. Once the page has loaded each of the items in the queue are positioned absolutely (in relation to the relative queue element).

I am now using a custom attribute to record the order of the elements are on-screen as DOM order does not matter in absolutely positioned items.

Have a look at the latest code in action...

[Brian Miller]

OMG! You're the dude, you're the Quigley dude! :D

Thank you

[Brian Miller]

What does this line do?

$('#item-queue').css('height', $('#item-queue').height());

[Mathachew Veteran]

  On 14/08/2011 at 20:55, Brian Miller said:

What does this line do?

$('#item-queue').css('height', $('#item-queue').height());

Sets the height of the item-queue element so that the content below it does not shift.

[Guest]

  On 14/08/2011 at 21:06, Mathachew said:

Sets the height of the item-queue element so that the content below it does not shift.

Exactly, the height is initially set to 'auto' so once all the containing children are set to absolute (removed from the normal flow of the document) the actual height of the container will be reduced to 0.

Try it out yourself by removing that one line of javascript and putting extra content underneath the item-queue div.

[Brian Miller]

Good stuff.

I was confused, thinking it was the equivalent to x=x, which seemed unneeded but your explanation makes sense.

[Mathachew Veteran]

  On 14/08/2011 at 21:33, Brian Miller said:

Good stuff.

I was confused, thinking it was the equivalent to x=x, which seemed unneeded but your explanation makes sense.

The first part sets the height, while the second gets the height. Breaking it down looks like this:

var height = $('#item-queue').height();

$('#item-queue').css('height', height);

// alternate set method
$('#item-queue').height(height);

The result is the same in either case. There are several jQuery functions that operate as a getter/setter: height, width, html, text, and val immediately come to mind.