Call custom function after jQuery sortable();

Question

I have this little plugin that causes an element to pulsate three times calling a .blink(). I am trying to make it work on the LI element after it has been dragged and dropped via jQuery .sortable(); but it doesn't seem to work in this context.

$(function() {
$( "#sortable" ).sortable().blink("update-value", 3, 350);
$( "#sortable" ).disableSelection();
});

BLINK CODE

$.fn.blink = function (cls, times, delay) {
var $self = this.removeClass(cls);
clearTimeout($.fn.blink.handler);
! function animate(times) {
    if (times) {
        $self.toggleClass(cls);
        $.fn.blink.handler = setTimeout(function () {
            animate(times - 1);
        }, delay);
    }
}(times * 2);
return this;
};

Answer 1

If you are using the jQueryUI sortable plugin, and if you want to make a blinking element that has been dragged and dropped (sorted), may be you should use the callbacks that are already available in the sortable API:

When you configure your sortable, you can give a callback for the change event:

$( ".selector" ).sortable({
    change: function( event, ui ) {}
});

API says: "This event is triggered during sorting, but only when the DOM position has changed"

You can also give a callback for the update event:

$( ".selector" ).sortable({
    update: function( event, ui ) {}
});

API says: "This event is triggered when the user stopped sorting and the DOM position has changed"

In your case, you should use the update callback and call the blink method to your element.

Note: the element drag and dropped should be available in the ui object, use a console.debug to check the content of the ui

Answer 2

You need to use update event like this:

    $( "#sortable" ).sortable({
       update: function( event, ui ) {
       var data = $( "#sortable" ).sortable( "serialize", { key: "sort" } );
       $.post( "url",{ 'data[]': data});
   }});

Or get array data like this:

var data = $("#sortable").sortable( "toArray" );

see document