This might be helpful to you: http://www.shopdev.co.uk/blog/sortable-lists-using-jquery-ui
On Jun 26, 6:27 am, Simon Burfield <[email protected]> wrote: > Can anyone help with this?? > > On Jun 23, 11:14 pm, Simon Burfield <[email protected]> wrote: > > > Ok I am quiet new to Jquery but have been doing programming for some > > years. Basically I just want to post back what panels are in what > > column and the order. In the end the only way I could get the values > > was to do a .each on each column with the toArray command and then put > > all of them in to a single array so i can post the results to another > > page? WHY? > > see below > > > <!doctype html> > > <html lang="en"> > > <head> > > <title>jQuery UI Sortable - Portlets</title> > > <link type="text/css" href="ui.all.css" rel="stylesheet" /> > > <script type="text/javascript" src="jquery-1.3.2.min.js"></script> > > <script type="text/javascript" src="ui.core.js"></script> > > <script type="text/javascript" src="ui.sortable.js"></script> > > <link type="text/css" href="demos.css" rel="stylesheet" /> > > <style type="text/css"> > > .column { width: 170px; float: left; padding-bottom: 100px; } > > .portlet { margin: 0 1em 1em 0; } > > .portlet-header { margin: 0.3em; padding-bottom: 4px; padding-left: > > 0.2em; } > > .portlet-header .ui-icon { float: right; } > > .portlet-content { padding: 0.4em; } > > .ui-sortable-placeholder { border: 1px dotted black; visibility: > > visible !important; height: 50px !important; } > > .ui-sortable-placeholder * { visibility: hidden; } > > </style> > > > <script type="text/javascript"> > > $(function() { > > $(".column").sortable({ > > connectWith: '.column', > > handle: '.portlet-header', > > stop:function(event, ui) { > > var sortorder = new Array(); > > var loop =0; > > $(".column").each(function(){ > > sortorder[loop] > > =$(this).sortable("toArray"); > > loop = loop + 1 ; > > }); > > //alert( sortorder[0] + sortorder[1] + > > sortorder[2]) ; > > > $.ajax({ > > url: "data.esp", > > method:'post', > > autoCancel:true, > > type: "post", > > data: 'sort1=' + sortorder[0] + ';sort2=' + sortorder > > [1] + ';sort3=' + sortorder[2] > > }); > > > } > > }); > > > $(".portlet").addClass("ui-widget ui-widget-content > > ui-helper- > > clearfix ui-corner-all") > > .find(".portlet-header") > > .addClass("ui-widget-header ui-corner-all") > > .prepend('<span class="ui-icon > > ui-icon-plusthick"></span>') > > .end() > > .find(".portlet-content"); > > > $(".portlet-header .ui-icon").click(function() { > > $(this).toggleClass("ui-icon-minusthick"); > > > > $(this).parents(".portlet:first").find(".portlet-content").toggle > > (); > > }); > > > }); > > > </script> > > </head> > > <body> > > <div class="demo"> > > > <div class="column" id="sortme"> > > > <div class="portlet" id="a1"> > > <div class="portlet-header" ><a href="">Feeds</a></div> > > <div class="portlet-content">Lorem ipsum dolor sit amet, > > consectetuer adipiscing elit</div> > > </div> > > > <div class="portlet" id="a2"> > > <div class="portlet-header" >News</div> > > <div class="portlet-content">Lorem ipsum dolor sit amet, > > consectetuer adipiscing elit</div> > > </div> > > > </div> > > > <div class="column" id="sortme2"> > > > <div class="portlet" id="a3"> > > <div class="portlet-header">Shopping</div> > > <div class="portlet-content">Lorem ipsum dolor sit amet, > > consectetuer adipiscing elit</div> > > </div> > > > </div> > > > <div class="column" id="test"> > > > <div class="portlet"> > > <div class="portlet-header">Links</div> > > <div class="portlet-content">Lorem ipsum dolor sit amet, > > consectetuer adipiscing elit</div> > > </div> > > > <div class="portlet"> > > <div class="portlet-header">Images</div> > > <div class="portlet-content">Lorem ipsum dolor sit amet, > > consectetuer adipiscing elit</div> > > </div> > > > </div> > > > </div><!-- End demo --> > > > </body> > > </html> --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "jQuery UI" group. To post to this group, send email to [email protected] To unsubscribe from this group, send email to [email protected] For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en -~----------~----~----~----~------~----~------~--~---
