Droppable creates (un)nested object - But the position of draggable changes

Question

I am dragging an object inside a droppable that is also a draggable. After I drop the object, it is nested inside the droppable. Similarly if I drag the object outside droppable, it is not nested anymore.

However, if I routinely drag in and drag out of the droppable, the draggable ends up at a different position.

The code is at http://jsfiddle.net/sandeepy02/kTAL3/41/

You can replicate the issue by creating an object 'Room' and dragging 'Table' into it. Then move 'Room' and the 'Table moves alongwith. However if you drag 'table' out of room and then drag in and drag out the 'table' it suddenly repositions itself.

EDIT To clarify the code I am using to append the dragged item to the droppable is:

.droppable({
            drop: function(event, ui) {
                $(this).append(ui.draggable);
            },
            out: function(event, ui) {
                $("#boundaryContainer").append(ui.draggable);
            }

I tried various methods that save the position of the draggable before the drop in and drop out but they havent worked. the methods are: METHOD 1:

.droppable({
            drop: function(event, ui) {
                var position = ui.draggable.offset();
                ui.draggable.appendTo($(this)).css(position);
            },
            out: function(event, ui) {
                var position = ui.draggable.offset();
                ui.draggable.appendTo("#boundaryContainer").css(position);
            }

METHOD 2:

.droppable({
            drop: function(event, ui) {
                var tempLeft= ui.draggable.position().left;
                var tempRight= ui.draggable.position().right;
                $(this).append(ui.draggable);
                ui.draggable.position().left = tempLeft;
                ui.draggable.position().right= tempRight;
            },
            out: function(event, ui) {
                var tempLeft= ui.draggable.position().left;
                var tempRight= ui.draggable.position().right;
                $("#boundaryContainer").append(ui.draggable);
                ui.draggable.position().left = tempLeft;
                ui.draggable.position().right= tempRight;
            }

METHOD 3 :(

http://jsfiddle.net/sandeepy02/kTAL3/53/

Answer 1

The issue here is that after you attach the second draggable to the droppable it becomes a part of it. Your tolerance here is the default one and the drag cursor is not repositioned. So regardless of whether you're dragging the inner element, it actually never leaves the parent element because the cursor is always on top of it and it is a part of it's parent element. In this case out never fires.

You can test that behavior with the slight modification I made to your fiddle. (the modification is cursorAt: { top: -10, left: -10 } in the second draggable. Notice it still doesn't work as you would expect that it would, because once you append the draggable back to the parent container elements are getting repositioned which is expected. You should think about keeping the droppables and the draggables in two separate parent containers, because then when you detach them you would not experience the issue with them repositioning relative one to another when they get attached back into the same parent container.