<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>jQuery - Moving elements Up and Down</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"
type="text/javascript"></script>
<style type="text/css">
div:first-of-type div.up {
visibility: hidden;
clear:both;
}
div:last-of-type div.down {
visibility: hidden;
}
div.main {
clear:both;
}
.up {
float: left;
}
.down {
float: left;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('.up').click(function() {
var parent = $(this).parent();
parent.insertBefore(parent.prev());
});
$('.down').click(function() {
var parent = $(this).parent();
parent.insertAfter(parent.next());
});
});
</script>
</head>
<body>
<h2>Click on the up and down arrows to move the rows</h2>
<div class="main">
<div class="up">
</div>
<div class="down">
</div>
First Element
</div>
<div class="main">
<div class="up">
</div>
<div class="down">
</div>
Second Element
</div>
<div class="main">
<div class="up">
</div>
<div class="down">
</div>
Third Element
</div>
<div class="main">
<div class="up">
</div>
<div class="down">
</div>
Fourth Element
</div>
<div class="main">
<div class="up">
</div>
<div class="down">
</div>
Fifth Element
</div>
</body>
</html>
