Resizing picked up elements using jQuery draggable/droppable

Question

Demo: http://jsfiddle.net/rWpca/

Problem number one

What am I trying to achieve here is that when a user picks up, or drops the draggable on to the droppable area, the styling will be different. Sadly there is some intermediate animation happening.

You will notice that when you pick it up the item increases in size immediately, which is the desired behaviour but as soon as you drop it, the font size temporarily decreases in size and then increases again. This behaviour is only exhibited when jQuery is animating the positioning of the dropped item. If the element "snaps" in to place instead of smoothly transitioning there is no animation or change of the font size.

Problem number two

Occasionally jQuery doesn't smoothly animate the positioning when you drop the word so it lands in the correct place. It just flies across the page with no easing at all. Why is this happening?

Answer 1

To fix the size issue, change your CSS to this.

From:

span.ui-draggable-dragging { font-size: 20px; }

To:

span.ui-draggable-dragging, span.ui-sortable-helper { font-size: 20px; }

When you are dragging, the ui-sortable-helper class is added to your span.

EDIT: Also in regards to your second issue, I came across the idea that you can set the revert attribute to an integer. I set it to 500 and your second issue seemed to happen less.
Like this: revert: 500