JQueryUI: drop within container, append and revert

I got stuck with JQueryUI. Specifically, I have the following html snipped:

<div class="from">
 <div class"item">Item 1</div>
 <div class"item">Item 2</div>
 <div class"item">Item 3</div>
</div>

<div class="to"></div>

Now I want to make the items draggable and droppable on the "to" box via the JQueryUI library. Therefore, I use this javascript snippet:

$('.item').draggable({
  revert: true
});

$('.to').droppable({
  drop: function(event, ui) {
    ui.draggable.appendTo(this);
  }
});

While this works perfectly as far as the result is concerned, the animation handling the 'revert' doesn't behave as I want it to. The problem is that dragging is obviously implemented by setting "position: relative" and then changing 'top' and 'left' css properties. As soon as the item is attached to the new container (which happens before the revert animation), it jumps to a new position because it'开发者_如何转开发s now positioned relatively to the new container. The revert animation now starts at the new position.

Is there any way I can have a smooth revert animation after attaching the item to a new container? Perhaps I am going about this completely the wrong way, so please don't hesitate to suggest any different approach.

I have been trying to recalculate the css left and top properties based on the new containers absolute position, but this of course works only for the first dropped item, the second one would additionally have to consider the first item's position.

Thanks.