Jquery `detach()` и `append` для нового родителя

Question

У меня есть динамическая веб-страница, где я использую Jquery« draggable »&« droppable ».
Я пытаюсь переместить один элемент из одного «родителя» в другой.

Когда я делаю «console.log», я вижу, что элемент имеет новый родительский элемент.
Но когда я позже добавлю больше HTML-контента в DOM, элемент не будет перемещаться с новым родителем. Он привязан к позиции смещения «документ».
Как я могу это решить?

FIDDLE
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 = "<div class='flakUp'>DropZone " + flakUpId + " </div>"; 
    $('#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 = "<div class='flakUp'>DropZone " + flakUpId + " </div>"; 
    $('#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 = "12" - HARDCODED к испытанию вы можете изменить позже б) класс = "щ-Droppable" добавил

$('#btnAddDropZone').on('click', function() { 
    flakUpId++; 
    var flakUp = "<div id='12' class='flakUp ui-droppable '>DropZone " + flakUpId + " </div>"; 
    $('#dropZones').prepend(flakUp); 
}) 

2). Я дал другой идентификатор = 100 вместо 1. Потому что я видел другой DIV с идентификатором = "1"

<div id="dropZones"> 
    <div class='flakUp' id="100">DropZone 1</div> 
</div> 

Полный код:

HTML

<div class="row well"> 
    <button class="btn btn-primary" id="btnAddDropZone">Add dropZone</button> 
</div> 
<div id="dropZones"> 
    <div class='flakUp' id="100">DropZone 1</div> 
</div> 
<hr> 
<div class="elementsDiv" id="1" style="width: 200px; height: 25px; background-color: #c2c2d6; cursor: move">Drag me 1</div> 
<div class="elementsDiv" id="2" style="width: 150px; height: 35px; background-color: #c2c2d6; cursor: move">Drag me 2</div> 
<div class="elementsDiv" id="3" style="width: 160px; height: 35px; background-color: #c2c2d6; cursor: move">Drag me 3</div> 

Script

//Make elements Draggable 
$('.elementsDiv').draggable({ 
    revert: 'invalid', 
}); 
var flakUpId = $('#1').attr('id'); 

$('#btnAddDropZone').on('click', function() { 
    flakUpId++; 
    var flakUp = "<div id='12' class='flakUp ui-droppable'>DropZone " + flakUpId + " </div>"; 
    $('#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); 
    }, 
});