Use this function var result = $(‘div’).sort(function (a, b) { var contentA =parseInt( $(a).data(‘sort’)); var contentB =parseInt( $(b).data(‘sort’)); return (contentA < contentB) ? -1 : (contentA > contentB) ? 1 : 0; }); $(‘#mylist’).html(result); You can call this function just after adding new divs. If you want to preserve javascript events within the divs, DO … Read more
A solution that worked well for me and that doesn’t require a timeout: (yes I’m a bit pedantic 😉 I add a marker class to the element when dragging starts, e.g. ‘noclick’. When the element is dropped, the click event is triggered — more precisely if dragging ends, actually it doesn’t have to be dropped … Read more
You can call sortable on a <tbody> instead of on the individual rows. <table> <tbody> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> <tr> <td>5</td> <td>6</td> </tr> </tbody> </table>​ <script> $(‘tbody’).sortable(); </script> $(function() { $( “tbody” ).sortable(); }); table { border-spacing: collapse; border-spacing: 0; } td { width: 50px; height: 25px; border: 1px solid black; … Read more
I usually solve this by binding a callback that sets the height of the placeholder to the height of the item being sorted to the start event. It’s a simple solution that gives you fine-grained control over how you want your placeholder to be displayed. $( “.column” ).sortable({ connectWith: “.column”, start: function(e, ui){ ui.placeholder.height(ui.item.height()); } … Read more
Found a solution (only tested with iPad until now!)! https://github.com/furf/jquery-ui-touch-punch
The jQuery UI sortable feature includes a serialize method to do this. It’s quite simple, really. Here’s a quick example that sends the data to the specified URL as soon as an element has changes position. $(‘#element’).sortable({ axis: ‘y’, update: function (event, ui) { var data = $(this).sortable(‘serialize’); // POST to server using $.post or … Read more
You can use the ui object provided to the events, specifically you want the stop event, the ui.item property and .index(), like this: $(“#sortable”).sortable({ stop: function(event, ui) { alert(“New position: ” + ui.item.index()); } }); You can see a working demo here, remember the .index() value is zero-based, so you may want to +1 for … Read more
I found the answer here. I modified it slightly to clone the row, instead of adding widths to the original: helper: function(e, tr) { var $originals = tr.children(); var $helper = tr.clone(); $helper.children().each(function(index) { // Set helper cell sizes to match the original sizes $(this).width($originals.eq(index).width()); }); return $helper; },