Toggle Elements From One Position to the Other using jQuery

With these cool script frameworks around, it is a breeze to drag and drop and move elements on a page. A common usage of the drag drop behavior is also seen in Shopping Cart applications where items are ‘dropped’ into the Cart.

Well what if you want to move an element from one position to the other, by just clicking on it. The element should move back when a user clicks on it again – similar to an undo behavior. Although this may look like a lot of scripting has to be done to achieve this, but with the jQuery API’s, this requirement can be achieved easily. Here’s how to move the position of elements on the page using jQuery:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<
html xmlns="http://www.w3.org/1999/xhtml">
<
head>
<
title>Toggle Elements From One Position to the Other using jQuery</title>
<
script type='text/javascript'
src='http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js'></script>
<
script type='text/javascript'>
$(document).ready(function() {
$(".smallDiv").toggle(
function() {
$(this).animate({ 'left': '600px' }, 'slow');
},
function() {
$(this).animate({ 'left': '0px' }, 'slow');
});
});
</script>

<
style type="text/css">
.smallDiv
{
height:150px;
width:150px;
position:relative;
border:solid 1px Silver;
background-color:Gray;
}
</style>
</
head>
<
body>
<
div class="smallDiv">
Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem
Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem
</div>
<
br />
<
div class="smallDiv">
Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem
Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem
</div>
<
br />
<
div class="smallDiv">
Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem
Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem
</div>
</
body>
</
html>



See a Live DEMO here.

Clicking on any div changes its position. Clicking it back, brings it to its original position.

OUTPUT

image






About The Author

Suprotim Agarwal
Suprotim Agarwal, Developer Technologies MVP (Microsoft Most Valuable Professional) is the founder and contributor for DevCurry, DotNetCurry and SQLServerCurry. He is the Chief Editor of a Developer Magazine called DNC Magazine. He has also authored two Books - 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook.

Follow him on twitter @suprotimagarwal.

5 comments:

Anonymous said...

Most. Pointless. Article. Ever

biznavigator said...

Very helpful.

I needed a pointer on how to move blocks around a page.

gergly said...

I wonder what is pointless in this article. I think Mr. Anonymous has learnt everything and needs no more tutorials!

Nice stuff.

Mike Walkling said...

Excellent post and just what I was looking for!

I am having just 1 problem though...

Links within the div that changes position do not work! The div simply returns to its original position.

Is there any way around this?

Hope you can help

Suprotim Agarwal said...

You want them to be retained on page refresh?