Keep track of the positions of all elements in a jQuery sortable

Question

I'm trying to figure out how I can track how the elements in a jQuery sortable. Let's say that I have four elements (divs) in my sortable, each have an unique id. Let's call them #100, #200, #300 and #400 and they're presented in that order to start with. But when I move #100 to let's say spot number 3, I need to be able to save the new position for this id, but also make sure that the other ones get updated position values aswell.

Am I making any sense? Basically I want to get the positions of each unique id, so I can save the order of the list for later use.

I haven't been able to find something that reports for all the elements in a sortable, just for the one that was moved..

Point me in the right direction? Thanks

Jesper Haug Karsrud · Accepted Answer · 2011-07-18T14:23:46.977

37

You can use the stop-event provided to you in sortable to keep track of the items. This is a small example;

(function($) {
    $('#sortable').sortable({
        stop: function(e, ui) {
            console.log($.map($(this).find('li'), function(el) {
                return el.id + ' = ' + $(el).index();
            }));
        }
    });
})(jQuery);

This logs an array of all the items in the sortable with their id's and their current indexes.

Here is a working example on jsfiddle as well: http://jsfiddle.net/beyondsanity/HgDZ9/

edited Jul 18 '11 at 14:23

answered Jul 17 '11 at 21:35

Jesper Haug Karsrud

1,193
6
10

No problem! Small improvement has been edited, using "this" instead of "el", and using this.id instead of $(el).attr('id'), as the latter isn't necessary since we're not doing any chaining. The fiddle remains the same as the old example so you can compare the two :) – Jesper Haug Karsrud Jul 18 '11 at 07:09
Tried your updated code, but it's not working. Any ideas? http://jsfiddle.net/LxMhF/2/ – INT Jul 18 '11 at 11:53
It seems I messed up a bit, we do need the "el", as "this" inside $.map is the "window" object, not the current element. "this" is the current element in $.fn.map ($(selector).map(fn)) tho, just to make that clear. – Jesper Haug Karsrud Jul 18 '11 at 14:27

score 5 · Answer 2 · answered Dec 11 '14 at 13:02

5

According to the docs http://api.jqueryui.com/sortable/#method-toArray I suggest you to use built-in method toArray. Example:

  $(document).ready(function() {
    $('#sortable').sortable({
      stop: function(e, ui) {
        console.log($('#sortable').sortable('toArray'));
      }
    });
    $('#sortable').disableSelection();
  });

answered Dec 11 '14 at 13:02

jmarceli

19,102
6
69
67

This comment should be the answer to all sort and position questions. I tried every other possibility and I never got the whole picture what moved and what were the previous positions. Just put them in start and update and add two mouse events (down/up) to get the selected element and display the total result – MKZ Jul 04 '18 at 08:06

score -1 · Answer 3 · edited May 23 '17 at 12:32

Possible duplicate of jQuery UI Sortable Position.

Basically, to get the position of an element within a sortable (or just a plain old parent elemen), just something like

$('#300').index();

This code will return 2 if nothing has been moved (index() starts counting at zero), and updates when the elements are re-arranged.

Here's a demo: http://jsfiddle.net/XB5Dh/. You can click an element to see its position, and the new position is shown when you drag an element.

Keep track of the positions of all elements in a jQuery sortable

3 Answers3