Jquery`delach（）`和`追加’给新的父母

我有一个动态网页，我使用Jquery“draggable”和“droppable”。
我试图将一个元素从一个“父”移动到另一个元素。

当我做“console.log”时，我可以看到该元素有一个新的父元素。
但是当我稍后向DOM添加更多HTML内容时，该元素将不会随着它的新父级移动。 它停留在“文档”偏移位置。
我怎么解决这个问题？

小提琴
https://jsfiddle.net/0apuqnxd/13/

JS

//Make elements Draggable $('.elementsDiv').draggable({ revert: 'invalid', }); var flakUpId = $('#1').attr('id'); $('#btnAddDropZone').on('click', function() { flakUpId++; var flakUp = "
DropZone " + flakUpId + " 
"; $('#dropZones').prepend(flakUp); }) $('.flakUp, .flakDown').droppable({ accept: '.elementsDiv', drop: function(event, ui) { var droppable = $(this); var draggable = ui.draggable; //Detach element from DOM draggable.detach(); //Append element to droped position and into new parent? draggable.css({ "left": ui.offset.left, "top": ui.offset.top, "position": "absolute" }).appendTo(droppable); }, }); 

Answer 1

这个怎么样？

 //Make elements Draggable $('.elementsDiv').draggable({ revert: 'invalid', }); var flakUpId = $('#1').attr('id'); $('#btnAddDropZone').on('click', function() { flakUpId++; var flakUp = "
DropZone " + flakUpId + " 
"; $('#dropZones').prepend(flakUp); registDroppable(); $(".flakUp .elementsDiv").each(function(e) { $(this).css({"top": $(this).offset().top+$(".flakUp").height()}); }); }) function registDroppable() { $('.flakUp, .flakDown').droppable({ accept: '.elementsDiv', drop: function(event, ui) { var droppable = $(this); var draggable = ui.draggable; // Move draggable into droppable draggable.css({ "left": ui.offset.left, "top": ui.offset.top, "position": "absolute" }).appendTo(droppable); }, }); } registDroppable(); 

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

Answer 2

我刚改变了三件事似乎有效：

1）添加新Div时添加ID和类：a）id =“12” – 硬编码测试后可以更改b）class =“ui-droppable”添加

 $('#btnAddDropZone').on('click', function() { flakUpId++; var flakUp = "
DropZone " + flakUpId + " 
"; $('#dropZones').prepend(flakUp); }) 

2）。 我给了不同的ID = 100而不是1.因为我看到另一个id =“1”的div

 
 
DropZone 1
  

完整代码：

HTML

 
 Add dropZone 
 
 
DropZone 1
 
 
 
Drag me 1
 
Drag me 2
 
Drag me 3 

脚本

 //Make elements Draggable $('.elementsDiv').draggable({ revert: 'invalid', }); var flakUpId = $('#1').attr('id'); $('#btnAddDropZone').on('click', function() { flakUpId++; var flakUp = "
DropZone " + flakUpId + " 
"; $('#dropZones').prepend(flakUp); }) $('.flakUp, .flakDown').droppable({ accept: '.elementsDiv', drop: function(event, ui) { var droppable = $(this); var draggable = ui.draggable; // Move draggable into droppable var offset = $(this).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); }, });