kala-tamin jQuery UI Sortable, how to determine current location and new location in update event?


jQuery UI Sortable, how to determine current location and new location in update event?



I have:

<ul id="sortableList">      <li>item 1</li>      <li>item 2</li>      <li>item 3</li> </ul> 

I have wired into the update: function(event, ui) { } but am not sure how to get the original and new position of the element. If i move item 3 to be above item 1, I want the original position to be 2 (0 based index) and the new position of item 3 to be 0.




Datatable with rows of inputs

1:



How to go back to the previous page using JSF
$('#sortable').sortable({     start: function(e, ui) {         // creates a temporary attribute on the element with the old index         $(this).attr('data-previndex', ui.item.index());     },     update: function(e, ui) {         // gets the new and old index then removes the temporary attribute         var newIndex = ui.item.index();         var oldIndex = $(this).attr('data-previndex');         $(this).removeAttr('data-previndex');     } }); 


MyFaces to Mojarra migration issue


How to conditionally style a row in a rich:dataTable

2:



Can someone describe the component-based paradigm in java web programming?
When the update function is invoked the ui.item.sortable has not been updated, however the UI element has visually moved.

JSF <c:if> with different object type
This allows you in the update function to get old position and new position.


Displaying data using JSF dataTable
.
Jsf component for html tag
   $('#sortable').sortable({             update: function(e, ui) {             // ui.item.sortable is the model but it is not updated until after update             var oldIndex = ui.item.sortable.index;              // new Index because the ui.item is the node and the visual element has been reordered             var newIndex = ui.item.index();         }     }); 


3:


You have several possibilities to check the old and the new position.

I would put them into arrays..
$('#sortable').sortable({     start: function(e, ui) {         // puts the old positions into array before sorting         var old_position = $(this).sortable('toArray');     },     update: function(event, ui) {         // grabs the new positions now that we've finished sorting         var new_position = $(this).sortable('toArray');     } }); 
And you can then easily extract what you need..


4:


I was looking for an answer to the same issue.

based on what Frankie contributed, I was able to get both the start and end "orders".

I had an issue with variable scope using the var, so I just stored them as .data() instead of local vars:.
$(this).data("old_position",$(this).sortable("toArray")) 
and.
$(this).data("new_position",$(this).sortable("toArray")) 
now you can call it up like this (from the update/end functions):.
console.log($(this).data("old_position")) console.log($(this).data("new_position")) 
Credit still goes to Frankie :).


5:


This worked for me .
$('#sortable').sortable({ start: function(e, ui) {     // puts the old positions into array before sorting     var old_position = ui.item.index(); }, update: function(event, ui) {     // grabs the new positions now that we've finished sorting     var new_position = ui.item.index(); } }); 


6:


This works for me,.
$('#app').sortable({     handle: '.handle',      start: function(evt, ui){         $(ui.item).data('old-ndex' , ui.item.index());     },      update: function(evt, ui) {         var old_index = $(ui.item).data('old-ndex');         var new_index = ui.item.index();          alert('old_index -'+old_index+' new index -'+new_index);      } }); 



69 out of 100 based on 54 user ratings 779 reviews