Post
Ask Question

Sortable Example in jQuery

  1. <html>  
  2.   
  3. <head>  
  4.     <title></title>  
  5.     <script src="Scripts/jquery-2.1.1.js" type="text/javascript"></script>  
  6.     <script src="Scripts/jquery-ui.js" type="text/javascript"></script>  
  7.     <link href="themes/vader/jquery-ui.css" type="text/css" rel="stylesheet" />  
  8.     <link href="themes/vader/theme.css" type="text/css" rel="stylesheet" />  
  9.     <script type="text/javascript">  
  10.         $(document).ready(function() {  
  11.             $("#ulsortable").sortable();  
  12.         });  
  13.     </script>  
  14.     <style type="text/css">  
  15.         #ulsortable {  
  16.             list-style-type: none;  
  17.             margin: 5px;  
  18.             padding: 5px;  
  19.             width: 60%;  
  20.         }  
  21.           
  22.         #ulsortable li {  
  23.             margin: 5px;  
  24.             padding: 5px;  
  25.             font-size: 20px;  
  26.             height: 20px;  
  27.             background-color: aqua;  
  28.             border: 2px solid gray;  
  29.             cursor: pointer;  
  30.         }  
  31.     </style>  
  32. </head>  
  33.   
  34. <body>  
  35.     <form id="form1" runat="server">  
  36.         <div>  
  37.             <ul id="ulsortable">  
  38.                 <li>List Item1</li>  
  39.                 <li>List Item2</li>  
  40.                 <li>List Item3</li>  
  41.                 <li>List Item4</li>  
  42.                 <li>List Item5</li>  
  43.             </ul>  
  44.         </div>  
  45.     </form>  
  46. </body>  
  47.   
  48. </html>