Drag and move one palace to another place for div or any element use the code

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