jqueryui: JqueryUI Sortable

<!DOCTYPE html>
<head>
   <title>Sortable</title>
   <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
   <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
   <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
   <style>
      #sortable-8{ list-style-type: none; margin: 0; 
         padding: 0; width: 25%; float:left;}
      #sortable-8 li{ margin: 0 3px 3px 3px; padding: 0.4em; 
         padding-left: 1.5em; font-size: 17px; height: 16px; }
      .default {
         background: #00b541;
         border: 1px solid #666;
         color: #fff;
      }
   </style>
   <script>
      $(function() {
         $('#sortable-8').sortable({
            update: function(event, ui) {
               var productOrder = $(this).sortable('toArray').toString();
               $("#sortable-9").text (productOrder);
            }
         });
      });
   </script>
</head>
<body>
   <ul id="sortable-8">
<li id="1" class="default">Menu 1</li>
<li id="2" class="default">Menu 2</li>
<li id="3" class="default">Menu 3</li>
<li id="4" class="default">Menu 4</li>
</ul>
<br>
   <h3>
Result<span id="sortable-9" style="margin-top: 100px; background: none repeat scroll 0% 0% rgb(51, 51, 51); color: rgb(255, 255, 255); height: 200px; padding: 20px;"></span></h3>
</body>
</html>

Monday, 23 February 2015

JqueryUI Sortable

No comments:

Post a Comment