How to set correct position of a NESTED draggable element
<p>BACKGROUND:
I have a draggable that I drop inside a droppable cum draggable. On 'Drop',  the draggable becomes nested inside droppable. On 'out' (i.e. dragging the draggable outside the droppable) the draggable becomes un-nested - i.e. becomes nested to the body.</p>

<p>ISSUE:
The nesting and un-nesting of a draggable causes the position of the draggable snapping to a new position. This is because the css of the draggable contains the relative position to the previsous parent, and in the process of nesting to a new parent, this relative css is assumed to be with respect to the new parent.</p>

<p>EXAMPLE AND PROBLEM:
Example at <a href="http://jsfiddle.net/sandeepy02/CNtRX/2/" rel="nofollow">http://jsfiddle.net/sandeepy02/CNtRX/2/</a>
You can replicate the issue by </p>

<ol>
<li><p>create objects 'Room' and 'Table'. </p></li>
<li><p>Move 'Room'.</p></li>
<li><p>Drop 'Table' into 'Room'.</p></li>
</ol>

<p>The table is repositioned away from the mouse cursor. The reason this is happening is because the css for 'table' contains the position of table relative to main boundaryContainer. When i drop and nest  'table' into 'room', the same relative position is then applied relative to 'room', thus causing the sudden change in position of 'table'.</p>

<p>Infact when I drag out the 'table' then the position again snaps to a different psoition because the 'table' css now contains relative position to 'room' and appending 'table' back to 'boundaryContainer' causes the relative position to 'room' being assumed as relative position to 'boundaryContainer'.</p>

<p>Any help will be appreciated.</p>
