Jqueryのdetach（）およびappendTo（）の後に配置する要素

Question

"ドラッグされた"要素と "ドロップされた"要素を配置するのに苦労しています。

ドラッグされた要素が親から削除された親から移動することを希望します。
私は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

Iは、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); 
    }