• 0

[jQuery] Swap Element Positions


Question

18 answers to this question

Recommended Posts

  • 0

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);
				});

  • 0

$(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

  • 0
  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

  • 0

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.

  • 0

$(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...

  • 0
  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.

  • 0
  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.

  • 0
  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.

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Posts

    • Nothing inherently wrong, but why buy 2021 tech in 2025? Assuming you were aiming for 6-10 years of usage, better to buy something current.
    • I have begun using Windows 11 native passkey feature. i have four passkeys set up so far. Three work fine, One has never worked. I have removed it and recreated it several times, still no luck. Anyway, on the websites in which it works, it works geat. No more two 2FA.
    • No, because most people coming into the workforce are already familiar with either MS Office or Google Docs. You know, from schools. Also, OnlyOffice is Russian, which should be a nogo for almost any European government
    • XMedia Recode 3.6.1.3 by Razvan Serea XMedia Recode is a free video and audio converter. XMedia Recode supports nearly all audio and video codecs. With XMedia Recode you can easily convert nearly all film and music files in the format you want. Convert for countless devices, select the predefined profile (iPhone, iPad, iPod Touch, Android-Tablets, Sony PSP, Amazon Kindle, Smartphones Blackberry, Wii und DS, Cowon, Android, HTC, Xbox360, Samsung, LG). XMedia Recode converts: 3GP in AVI, 3GP in FLV, AC3 in MP3, AC3 in WAV, ASF in 3GP, ASF in FLV, ASF in MP4, AVI in FLV, AVI in 3GP, FLAC in MP3, FLAC in WMA, FLV in 3GP, FLV in Mp3, DVD in 3GP, DVD in AC3, DVD in AVI, DVD in MP3, DVD in MP4, DVD in MOV, DVD in SVCD, DVD in VCD, DVD in WMV, OGG in MP3, OGG in WMA, MPEG in AVI, MP2 in MP3, MP4 in FLV, MP4 in AVI, M4P in MP3, MOV in 3GP, MOV in AVI, MOV in FLV, WMA in MP3, WMV in FLV, WAV in MP3. Main functions of XMedia Recode: Extracts audio tracks from DVD, Blu-ray and video files Framework also freely selectable color (Padding) Drag-n-drop of video files directly on the encoder Selection display format (1: 1, 3:2, 4:3, 5:4, 5:6, 11:9,16: 9, 16:10, 2.21: 1) Zoom shot (none, type character box, media, Pan Scan, to screen) ''Direct Stream'' copies the audio stream or video stream into the target format 2-Pass-Encoding Volume correction Can change framerate, bit rate, resolution Can extract audio stream of most video formats Produce DVD copies for mobile phones, various mobile devices Edit Video: Color correction Video cut Cropping Denoise Delogo Deblocking De-interlacing Flip Image Start Time End Time Resolution Rotate Image Sepia Sharpness Padding Video fade in / fade out XMedia Recode 3.6.1.3 changelog: Update of ffmpeg AOM AV1 Codec: Added "Quantization" options Update of x264 (3221) Codec Update of the Italian language file Update of the Korean language file Fixed minor bugs Download: XMedia Recode 64-bit | Portable ~20.0 MB (Freeware) Download: XMedia Recode 32-bit | Portable Download: XMedia Recode for Windows XP SP3, Vista | Portable ~10.0 MB View: XMedia Recode Website | Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware
    • It's not a joke but I think it is pretty hilarious I was searching Fitch for a credit rating on a fund.   I found what Fitch had to say about the fund including this disclarimer.  LOL "This abstract may have been generated in whole or in part using artificial intelligence and is therefore subject to error and inaccuracy, including but not limited to, hallucination" No link posted for privacy reasons.       
  • Recent Achievements

    • Dedicated
      Cole Multipass earned a badge
      Dedicated
    • Week One Done
      Alexander 001 earned a badge
      Week One Done
    • Week One Done
      icecreamconesleeves earned a badge
      Week One Done
    • One Year In
      PAC0 earned a badge
      One Year In
    • One Month Later
      PAC0 earned a badge
      One Month Later
  • Popular Contributors

    1. 1
      +primortal
      567
    2. 2
      +FloatingFatMan
      191
    3. 3
      ATLien_0
      187
    4. 4
      Skyfrog
      114
    5. 5
      Som
      109
  • Tell a friend

    Love Neowin? Tell a friend!