Question

I’m trying to animate a div after it has been dragged and dropped with jQuery UI. I’m using the ‘stop’ event as per the jQuery UI docs ().

However, I’m really struggling to get the object that has been dropped to be able to animate it. Here’s where I’m at currently, although I’ve tried several things which just don’t seem to work:

        $('.item').draggable({
            stop: function (event, ui) {
                $(ui.draggable).animate({ bottom: 0 }, { duration: 1000, easing: 'easeOutBounce' });
            }
        });

This is using jQuery 1.9.0 and jQuery UI 1.10.0.

I’m sure this must be simple – I just can’t get it to work.

Answer 1

Change ui.draggable (which is nothing) to this and it will affect the dragged div. Note that the animation may not occur depending on your layout, but I can get it to work with this:

http://jsfiddle.net/T4UDp/

Since the draggable itself changes top, bottom: 0 alone doesn’t work.