Element disapears after detach() and appendTo()

Question

I'm using hQuery's draggable" & "droppable". When I drop an element I want to move it from its previous parent to its dropped parent.

But when I detach and append it, it disappears! Why?

If I do a console.log on the dragged element, I can see that it has changed parents.

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

JS

//Make elements Draggable
$('.elementsDiv').draggable({
    revert: 'invalid',
  });

  $('.flakUp, .flakDown').droppable({
    accept: '.elementsDiv',
    drop: function(event, ui) {

  //Get dragged Element (checked)
  draggedElement = $(ui.draggable);

  //Get dropZone where element is dropped (checked)
  dropZone = $(event.target);

  //Remove element from DOM (prev parent)
  $(draggedElement).detach();

  //Append element to DOM (new parent)
  $(draggedElement).appendTo(dropZone);
  },
});

UPDATED FIDDLE
https://jsfiddle.net/0apuqnxd/13/

This is to demonstrate that the dropped element us not attched to dropZone, but only to the document...

Answer 1

It seems that coordinate is wrong.

When drop a item, it is placed on upper coordinate better than dropped coordinate.

$('.flakUp, .flakDown').droppable({
  accept: '.elementsDiv',
  drop: function(event, ui) {
        console.log(event);
    console.log(ui.offset.top);
    var droppable = $(this);
    var draggable = ui.draggable;
       // Move draggable into droppable
    var offset = $(this).offset();
    console.log(offset);
    var relX = event.pageX - offset.left;
    var relY = event.pageY - offset.top;
    draggable.css({"left": ui.offset.left, "top": ui.offset.top, "position": "absolute"}).appendTo(droppable);
  },
});

https://jsfiddle.net/ChaHyukIm/0apuqnxd/12/