Question

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.

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.

EXAMPLE AND PROBLEM:
Example at http://jsfiddle.net/sandeepy02/CNtRX/2/
You can replicate the issue by

1. create objects ‘Room’ and ‘Table’.

2. Move ‘Room’.

3. Drop ‘Table’ into ‘Room’.

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’.

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’.

Any help will be appreciated.

Answer 1

You problem lies in two extra paramters which are appended to the Table Div -> left & top . A workaround which I suggest is, there is an option to call a function after each draggable or droppable event. In that function you can set value of these two attributes to 0;

When I removed those using Firebug, the position was aligned perfectly. Can you try it and post the result here?