JQuery move div up down

Posted: September 29, 2011 in 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<style>
.upSpan{ padding:3px; cursor:pointer;}
.downSpan{ padding:3px; cursor:pointer;}
</style>
<script language="javascript">
$(document).ready(function()
{
	var upStr = '&uarr;';
	var downStr = '&darr; ';
	$('.upDownDiv div').each(function()
	{
		$(this).prepend('<span class="downSpan" title="Move Down">'+downStr+'</span>');
		$(this).prepend('<span class="upSpan" title="Move Up">'+upStr+'</span>');
		 refreshUpDown();
	});
	$('.upSpan').live('click',function() 
	{
		var objCurr = $(this).parent();
		var objPrev = $(this).parent().prev();
		$(objPrev).insertAfter($(objCurr));
		refreshUpDown();
	});
	$('.downSpan').live('click',function() 
	{
		var objCurr = $(this).parent();
		var objPrev = $(this).parent().next();
		$(objPrev).insertBefore($(objCurr));
		refreshUpDown();
	});
	function refreshUpDown()
	{
		$('.upSpan').show();
		$('.downSpan').show();
		$(".upDownDiv div:first .upSpan").hide();
		$(".upDownDiv div:last .downSpan").hide();
	}
});
</script>
</head>

<body>

<div class="upDownDiv">
<div style="background:#E8E8E8; width:300px; padding:10px; margin:2px;"> Dabang</div>
<div style="background:#E8E8E8; width:300px; padding:10px; margin:2px;"> Bodygaurd</div>
<div style="background:#E8E8E8; width:300px; padding:10px; margin:2px;"> Hum apke he kaun</div>
<div style="background:#E8E8E8; width:300px; padding:10px; margin:2px;"> Ready</div>
<div style="background:#E8E8E8; width:300px; padding:10px; margin:2px;"> Veer</div>
</div>

</body>
</html>

Advertisements
Comments
  1. Is it possible to apply it on Context Menu option MOVE UP and MOVE Down.
    Please help

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s