Question

I have a container called three. It has the two divs inside as ‘one’ and ‘two’. I would just like to shuffle their absolute positions. Is it possible? If so, is there any built-in function with jQuery?

This is my try, but it does not work properly:

HTML:

<div id='three'>
    <div id="one">1</div>
    <div id="two">2</div>
</div>

Code:

var clone1 = $('#one').clone();
var colone2 = $('#two').clone();

var clone1X = $('#two').position().left
var clone1Y = $('#two').position().top;

var clone2X = $('#one').position().left;
var clone2Y = $('#one').position().top;

$('div > div').remove();

$('div').append($(colone2).css({left:clone1X,top:clone1Y})).append($(clone1).css({left:clone2X,top:clone2Y}));

But does not work as I expected.

Answer 1

It shouldn’t be that hard… Here is how it would go,

<div id='three'>
    <div id="one">1</div>
    <div id="two">2</div>
</div>

$(function () {
    var onePos = $('#one').position();
    var twoPos = $('#two').position();

    $('#one').css({left: twoPos.left, top: twoPos.top});
    $('#two').css({left: onePos.left, top: onePos.top});
});