javascript - 在 Jquery detach() 和 appendTo() 之后定位元素

Question

我很难定位我的“拖动”和“丢弃”元素。

我希望我拖动的元素从 prev parent 移动到 dropped parent。
所以我使用 Jquery detach()。

我的问题是定位，元素消失在屏幕之外。
我该如何解决这个问题？

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

我通过使用 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);
    }