要素disapearsデタッチ（）とappendTo（）

Question

私が使用している

hQueryのドラッグ」& 『ドロップ可能』。私はその落とし親にその前の親からそれを移動したい要素をドロップする。

しかし、後に私はそれが！消え、切り離し、それを追加するのはなぜ？

私はドラッグされた要素に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); 
    }, 
}); 

UPDATED FIDDLE
https://jsfiddle.net/0apuqnxd/13/

これは、ドロップ要素たちがしかのドキュメントに、ドロップゾーンにattchedないことを実証することである...

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/