Detect if element position was changed in Jquery UI sortable

Question

I use the following code to reorder items on my website:

$(document).ready(function () {
    $("#my-list").sortable({
        stop: function (event, ui) {
            var id = $(ui.item).attr('id');

            var url = '/en/account/changeposition?id=idreplace&position=posReplace';

            url = url.replace("idreplace", id);
            url = url.replace("posReplace", ui.item.index());

            window.location.href = url;
        },
        distance: 15
    });
});

However, even if I don't change element position and place element at the same place, Jquery UI will call 'stop'-function.

Is it possible to detect if element index (position) was changed without using custom data attributes?

// I would like to avoid adding custom data attributes like this:
<li id="id100" data-original-position="1"></li>
<li id="id101" data-original-position="2"></li>

score 30 · Accepted Answer · edited May 23 '17 at 12:02

Have a look at this answer.

It worked for me as follows:

$(selector).sortable({
    start: function(event, ui) {
        ui.item.data('start_pos', ui.item.index());
    },
    stop: function(event, ui) {
        var start_pos = ui.item.data('start_pos');
        if (start_pos != ui.item.index()) {
            // the item got moved
        } else {
            // the item was returned to the same position
        }
    },
    update: function(event, ui) {
        $.post('/reorder', $(selector).sortable('serialize'))
            .done(function() {
                alert('Updated')
            });
        }
});

score 11 · Answer 2 · answered May 14 '14 at 20:35

11

Unless I'm missing something, the update event would be your best option here. Per the documentation

This event is triggered when the user stopped sorting and the DOM position has changed.

So if the only thing you're concerned about when the user stops dragging is whether or not the index changed, just use update and save yourself the trouble of setting and evaluating data properties.

answered May 14 '14 at 20:35

EJay

1,079
2
12
23

I agree, I just needed the update portion. As soon as the sort is done then I just used the `id="xxx"` field I associated with the container `
` serialized the array and updated my field in my DB.
– Cesar Bielich Apr 23 '15 at 06:40

score 0 · Answer 3 · edited Aug 24 '15 at 11:19

0

Got this from http://api.jqueryui.com/sortable/#event-update

update( event, ui )Type: sortupdate This event is triggered when the user stopped sorting and the DOM position has changed

According to that, update is the only thing you need... becease update detects if the DOM position has changed.

edited Aug 24 '15 at 11:19

Tiddo

6,331
6
52
85

answered Nov 21 '14 at 04:24

Jc Tan

1

score 0 · Answer 4 · answered Aug 18 '16 at 11:43

Whilst using the update event appears to be the best answer for most scenarios, it's worth bearing in mind that this event does not trigger if the element hasn't moved.

Whilst this might be fine in most cases, you may need to run some code when sortable stops BUT no changes were made (I found myself needing to reset some global variables). This was only possible using the accepted answer.

score 0 · Answer 5 · edited Oct 19 '17 at 06:43

0

Create a bool

sortableChanged = false;

Set to true in the update of the JQuery sortable.

edited Oct 19 '17 at 06:43

Aurasphere

3,841
12
44
71

answered Oct 19 '17 at 06:22

Tim Maes

473
3
15

Detect if element position was changed in Jquery UI sortable

5 Answers5