Correcting coordinates on a jquery ui draggable element

JavaScript
1

So here’s the setup, I have a image thumbnail, next to a list of groups. I’m dragging this element to the groups and putting it into a category. However, the problem (I think) lies in that when dragging starts, I’m animating the image to 20% of it’s original width. This somewhat displaces the cursor to the image but REALLY messes up the droppable target.

Here’s the code


	$('.user_file_preview').live('mouseenter', function() {
		var width = $(this).attr('data-width');
		var height = $(this).attr('data-height');
		$(this).draggable({
			start: function(event, ui) {
				$(this).animate({width:width*.2},200, function() {
					// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
					// CORRECT PLACEMENT OF GRAPHIC
					// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
				});
			},
			stop: function() {
				$(this).animate({width:width + 'px'},200);
			},
			revert:'invalid'
		});
	});

I feel like draggable is calculating the width/height of the element and then I’m screwing up positioning by animating it after start. Is there some sort of reinit I can call?

Thanks.