• 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

    • Amazon Deal: Sony 65 inch 4K Bravia 5 2025 Mini LED TV with Dolby Vision/Atmos is $200 off by Sayan Sen Recently, we covered soundbar home theatre deals from Samsung and JBL for under $1000. Those are still selling for their best prices and you can check them out in their respective articles linked above. Obviously, for a home theatre, you also need a display, and depending on the kind of setup and room you have, you could choose a fairly premium projector like Valerion's StreamMaster Plus2 4K that is currently $300 off on Amazon US, or you could look for a TV. If you are looking for something for under $1500 then Sony has a great deal at the moment. The company's Bravia 5 mini LED 65-inch TV is on sale for $1298 thanks to a $200 discount (purchase link under the specs list below). Mini LEDs, unlike LEDs, promise much better precision in terms of backlighting which should lead to better contrasts with deeper blacks and brighter whites without being overblown either way. The full specs of the Bravia 5 are given below: Display Resolution: 3840 x 2160 (4K UHD) Panel Type: LCD with Mini LED backlight Backlight Dimming: XR Backlight Master Drive with local dimming for enhanced contrast Panel Refresh Rate: 120 Hz HDR Compatibility: Supports HDR10, HLG, and Dolby Vision Color & Image Processing: XR Triluminos Pro™ with Live Color™ technology, XR Clear Image, and XR Motion Clarity™ Connectivity & Ports: HDMI Inputs: 4 side-mounted (supports HDMI 2.1 features including 4K at 120Hz, eARC, VRR, ALLM, and SBTM) HDCP: Version 2.3 on all HDMI ports USB Ports: 2 side ports (supports FAT16, FAT32, exFAT, and NTFS formats) Other Ports: RS-232C Input: 1 (side) Digital Audio Output: 1 (side) RF (Terrestrial/Cable) Input: 1 (side) LAN Input: 1 (side) Wireless & Smart Features: Wi‑Fi: Dual‑band (2.4 GHz/5 GHz) with support for Wi‑Fi Certified 802.11 and Wi‑Fi 6 Bluetooth: Version 5.3 (compatible with A2DP, HID, HOGP, SPP, and AVRCP) Built‑in Chromecast: Yes Operating Platform: Google TV Smart Connectivity: Features BRAVIA Sync (with HDMI‑CEC), Apple HomeKit, and Apple AirPlay Get it at the link below: Sony BRAVIA 5 65 Inch TV, Mini LED, 4K120hz Television with Dolby Vision/Atmos, Exclusive Features for PlayStation®5, K-65XR50, 2025 Model: $1298.00 (Shipped and Sold by Amazon US) This Amazon deal is US-specific and not available in other regions unless specified. If you don't like it or want to look at more options, check out the Amazon US deals page here. Get Prime (SNAP), Prime Video, Audible Plus or Kindle / Music Unlimited. Free for 30 days. As an Amazon Associate, we earn from qualifying purchases.
    • At the end of the day, there isn't a lot of incentive for Android tablets. I have one, but only because I am a developer and didn't want a phone and the price was right.
    • Tablet numbers have been declining for years. The iPad is the exception to the rule, because it has some niche audiences, otherwise consumers are releasing they are generally not what they need
  • Recent Achievements

    • Explorer
      Case_f went up a rank
      Explorer
    • Conversation Starter
      Jamie Smith earned a badge
      Conversation Starter
    • First Post
      NeoToad777 earned a badge
      First Post
    • Week One Done
      JoeV earned a badge
      Week One Done
    • One Month Later
      VAT Services in UAE earned a badge
      One Month Later
  • Popular Contributors

    1. 1
      +primortal
      523
    2. 2
      ATLien_0
      231
    3. 3
      +FloatingFatMan
      150
    4. 4
      +Edouard
      142
    5. 5
      Michael Scrip
      109
  • Tell a friend

    Love Neowin? Tell a friend!