-
How to show sortable containers ?
Question: How to show sortable containers with JQuery?
Answer: you can use following steps for this:
Step 1: Create a UL LI based listing Step 2: Assign ui-sortable class to UL Step 3: Assign Unique id to each LI Step 4: Write CSS for UL, LI and divs Step 5: Write JQuery code for manipulation Example:HTML
<h1>Sorable</h1> <br /> <p class="ui-widget"> <ul id="options" class="ui-sortable"> <li id="item_1" class="block ui-state-default"> Item 1 </li> <li id="item_2" class="block ui-state-default"> Item 2 </li> <li id="item_3" class="block ui-state-default"> Item 3 </li> <li id="item_4" class="block ui-state-default"> Item 4 </li> <li id="item_5" class="block ui-state-default"> Item 5 </li> </ul> </p> CSS<link rel="stylesheet" type="text/css" media="all" href="assets/css/ui.all.css"> JQuery<script type="text/javascript" src="assets/js/jquery-1.6.4.min.js"></script> <script type="text/javascript" src="assets/js/jquery-ui-1.8.16.custom.min.js"></script> <script> $(function() { $(".ui-sortable").sortable({ opacity: 0.6, cursor: 'move', update: function() { var order = $(this).sortable("serialize"); alert(order); //Use AJAX POST Request to save sort order in your Database /*var url = "/sort_items"; $.ajax({ url: url, type: 'post', data: order, success: function(result) { } })*/ } }); }); </script> Demo:
-
