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

About The Author

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; August 21, 2009 at 6:30 AM
biznavigator said...: Very helpful.

I needed a pointer on how to move blocks around a page.; August 21, 2009 at 12:02 PM
gergly said...: I wonder what is pointless in this article. I think Mr. Anonymous has learnt everything and needs no more tutorials!

Nice stuff.; August 21, 2009 at 8:33 PM
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; June 7, 2012 at 3:50 AM
Suprotim Agarwal said...: You want them to be retained on page refresh?; June 7, 2012 at 7:32 AM