新しい親にJquery `detach（）`と `append`を追加しました

Question

私はJquery" draggable "を使用する動的Webページを持っています&" droppable "。
私は1つの要素を1つの「親」から別の要素に移動しようとしています。

「console.log」とすると、要素に新しい親があることがわかります。
しかし、後でDOMにさらに多くのHTMLコンテンツを追加すると、その要素は新しい親と一緒に移動しません。それは "ドキュメント"オフセット位置に固執しています。
どうすればこの問題を解決できますか？これについて

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

私はちょうど3つのことを変更し、それが働いているようだ：

1）新しい事業部を追加するときにIDやクラスを追加しました： a）のID = "12" - テストにハードコード後で b）のクラスを変更することができます= "UI-ドロップ可能に"）

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

を追加しました。

スクリプト

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> 

：私は、ID = "1"

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

完全なコードを持つ別のdivを見たので、私が代わりに1 の= 100異なるIDを与えました

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