Show successful dragging component message with jQuery UI

Question

I got the following jQuery:

$(function() {
    $( "#sortable1, #sortable2, #sortable3, #sortable4, #sortable5, #sortable6").sortable({
        connectWith: ".connectedSortable"
    }).disableSelection();
});

This jQuery drags one div into the other, up to there, okay! I want that, when dragging and succeeding, give a alert('arrastado com sucesso').

How can I do this?

Answer 1

To plugin api is always a good reference, in your case specifically in the event part.

For this, depends a little bit on the context, has 3 events, stop(), update() and receive().

The stop() and fired whenever you obviously stop dragging the element.

Already the update() is quite similar, but fires only if there is a change of position.

The receive() which I think is ideal for you, is fired when you drop an element in another list connected with the source.

The code is very simple:

$(function() {
    $("#sortable1, #sortable2, #sortable3, #sortable4, #sortable5, #sortable6").sortable({
        connectWith: ".connectedSortable",
        update: function (event, ui) {
            alert('Arrastado com sucesso com alteração.')
        },
        stop: function(event, ui) {
            alert('Arrastado com sucesso, mesma posição.')
        },
        receive: function(event, ui) {
            alert('Arrastado com sucesso para outra lista.')
        },
    }).disableSelection();
});

Now just decide which is best for you.