javascript - 元素在 detach() 和 appendTo() 之后消失

Question

我正在使用 hQuery 的 draggable"& "droppable"。当我放下一个元素时，我想将它从它以前的父元素移动到它被删除的父元素。

但是当我分离并附加它时，它就消失了!为什么？

如果我对拖动的元素执行 console.log，我可以看到它已经更改了父元素。

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

更新的 FIDDLE
https://jsfiddle.net/0apuqnxd/13/

这是为了证明我们没有将放置的元素附加到 dropZone，而只附加到文档...

Answer 1

好像坐标不对

当放下一个元素时，它被放置在比下降坐标更好的上坐标。

$('.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/