jQuery detach（）和appendTo（）之后的定位元素

Question

我在放置“拖放”和“刪除”元素時遇到了困難。

我希望我拖動的元素從上一個父級移到另一個父級。
所以我用Jquery detach() 。

我的問題是定位，元素從屏幕上消失了。
我怎樣才能解決這個問題？

小提琴
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

我通過使用CSS將父級設置為relative並將放置的元素設置為“絕對”位置來解決此問題。

    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);
    }