• 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:


  • Leave a Reply

    Your email address will not be published. Required fields are marked *

    You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>