Positioning elements after Jquery detach() and appendTo()

Question

I'm having a hard time with positioning my "dragged" and "dropped" elements.

I'd like my dragged elements to move from prev parent do dropped parent.
So i use Jquery detach() .

My problem is with positioning, the elements disapear out of screen.
How can i fix this?

FIDDLE
https://jsfiddle.net/0apuqnxd/8/

JS

//dropZone data    
            //Get dropZone, where element is dropped (flakUp or flakDown)
            dropZone = $(event.target);

            //Get parent dropZoneId (flakId)
            dropZoneParentId = dropZone.parent().attr('id');

            //console.log(draggedElement.position());

            $(draggedElement).detach();

            //console.log(draggedElement.position());

            $(draggedElement).appendTo(dropZone);

            //console.log(draggedElement.position());

            draggedElementPosition = draggedElement.position();
            console.log(draggedElementPosition);

            dropZonePosition = dropZone.position();
            console.log(dropZonePosition);


            draggedElementPosition.top = draggedElementPosition.top - dropZonePosition.top;
            draggedElementPosition.left = draggedElementPosition.left - dropZonePosition.left;
            console.log(draggedElementPosition);

            draggedElement.position(draggedElementPosition);

Answer 1

I solved it by setting the parent to relative, and the dropped element to "absolute" position, with css.

    drop: function (event, ui) {

        var droppable = $(this); 
        var draggable = ui.draggable; 

        parentOffset = $(this).offset();

        var offset = $(draggable).offset();
        var xPos = offset.left;
        var yPos = offset.top;

        draggable.css({
            "left": xPos - parentOffset.left,
            "top": yPos - parentOffset.top,
            "position": "absolute"
          }).appendTo(droppable);
    }