Question: How to show sortable containers with JQuery?
Answer:
you can use following steps for this:
<br />
Step 1: Create a UL LI based listing<br />
Step 2: Assign ui-sortable class to UL<br />
Step 3: Assign Unique id to each LI<br />
Step 4: Write CSS for UL, LI and divs<br />
Step 5: Write JQuery code for manipulation
you can use following steps for this:
Example:
HTML
</p>
<h1>Sorable</h1>
<p></p>
<div 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></div>
<p>
CSS
<link rel="stylesheet" type="text/css" media="all" href="assets/css/ui.all.css">
JQuery
<br />
<script type="text/javascript" src="assets/js/jquery-1.6.4.min.js"></script><br />
<script type="text/javascript" src="assets/js/jquery-ui-1.8.16.custom.min.js"></script><br />
<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><br />
CSS
JQuery
Demo: