Drag and move one palace to another place for div or any element use the code
css code
a{ text-decoration:none;}
.drage{ float:left; width:100%;}
.drage ul{width:200px; margin:0px; padding:0px;}
.drage ul li{width:100%; list-style:none; height:40px; line-height:40px; background-color:#F30; text-align:center; border:1px solid #000;}
.drage ul li a{ color:#FFF;}
.drage ul li:hover{ background:#CCF; color:#000; cursor:pointer;}
#wapper{ float:left;}
HTML code
<div class="drage">
<ul id="wapper">
<li><a href="#">Accounting</a></li>
<li><a href="#">Maths</a></li>
<li><a href="#">Business</a></li>
<li><a href="#">texation</a></li>
<li><a href="#">Costing</a></li>
</ul>
</div>
JS code
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#wapper').sortable();
});
</script>
supporting file download for giving bottom links
http://jqueryui.com/download/
go to bottom select blitzer mode and after that download the files
No comments:
Post a Comment