CODEWITHSUNDEEP
jqueryjquery-ui-sortable
user1942626
user1942626

Reputation: 835

Jquery ui sortable drop event

I am working with jquery ui sortable. I would like to get the sorting array to pass it to the handling file on drop event.

one funny thing i found.. http://jsfiddle.net/7Ny9h/

$(function() {
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();

    $( "#sortable li" ).droppable({
        drop: function( ) {
            var order = $("#sortable").sortable("serialize", {key:'order[]'});
            $( "p" ).html( order );
        }
    });
});

Seeing the sample, if I move BOX No.2, the BOX 2 is left out of the array.

Perhaps I need a kind of "dropend" event because it seems that jquery ui drop event doesn't count the dragged and dropped one.

Upvotes: 27

Views: 51058

Answers (4)

zahlawi
zahlawi

Reputation: 197

For anyone else that needs to specifically access the LI element that triggered the update function like I did, (from the top answer) you can do so with the adjustments below:

// Simply include the event in the function parameters
$( "#sortable" ).sortable({
    update: function(ev) {
        // ev.originalEvent.target is the target that was clicked to drag the li inside the sortable (ev.target is the sortable ul itself)
        // In case you have subelements in your li, call a recursive function that moves up in the DOM until it hits an LI
        var li_elem = getLI(ev.originalEvent.target);
        // Do work using the li element that triggered this event below!
    }
});

// Recursive function to get the LI element
function getLI(elem) {
    // If we have the LI return
    if (elem.tagName === "LI") {
        return(elem);
    }
    // If not check the parent
    const parent = elem.parentElement;
    if (parent.tagName != "LI") {
        // If still not LI element, recall function but pass in the parent elemtn
        return(getLI(parent));
        
    }
    else {
        // Return the parent if it's the LI element
        return(parent);
    }
}

Upvotes: 0

MagicSquirrel
MagicSquirrel

Reputation: 21

When using with multiple sortable lists on a single page where you also need to save the order of both lists as well as what items were moved into which list, only the stop() method works. All other events fire twice or more when elements are moved from one list into another.

$(function() {
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();

    $( "#sortable" ).sortable({
        stop: function( ) {
            var order = $("#sortable").sortable("serialize", {key:'order[]'});
            $( "p" ).html( order );
        }
    });
});

Upvotes: 1

Ari
Ari

Reputation: 5009

You can also use update to detect it.

$( "#sortable" ).sortable({
    update: function( ) {
        // do stuff
    }
});

Upvotes: 48

user1942626
user1942626

Reputation: 835

I could solve the problem with jQuery UI Sortable stop event.

$(function() {
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();

    $( "#sortable" ).sortable({
        stop: function( ) {
            var order = $("#sortable").sortable("serialize", {key:'order[]'});
            $( "p" ).html( order );
        }
    });
});

Upvotes: 29

Related Questions