CODEWITHSUNDEEP
jqueryjquery-ui
user1613797
user1613797

Reputation: 1267

Detect if element position was changed in Jquery UI sortable

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>

Upvotes: 9

Views: 12692

Answers (5)

Tim Maes
Tim Maes

Reputation: 612

Create a bool 

sortableChanged = false;

Set to true in the update of the JQuery sortable.

Upvotes: 0

Simon Russell
Simon Russell

Reputation: 13

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.

Upvotes: 0

Jc Tan
Jc Tan

Reputation: 1

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.

Upvotes: 0

EJay
EJay

Reputation: 1159

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.

Upvotes: 12

savedario
savedario

Reputation: 947

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')
            });
        }
});

Upvotes: 32

Related Questions