Question

我正在使用hQuery的可拖动“＆amp;”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);
  },
});

更新后的内容
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/

在detach（）和appendTo（）之后元素消失

1 个答案: