Jquery Drag＆Dropの後に要素を位置に移動

Question

ドロップ後に要素を配置する際に問題があります。そのリストを作るために

私はdiv要素と「リスト」を持っている...
「更新」と一緒にdivを保つ私はそれがドロップゾーンだし、リストから要素を移動するためのjQuery appendを使用しています。

要素を新しい親に追加すると、要素の位置は左上になります。
しかし、私は要素がドロップされた位置にとどまるようにしたいと思います。
私はドロップされた位置を保存して、要素を追加して、それをドロップされた場所に戻します。

しかし、要素は保存されたドロップ位置に移動します。
私が最初.drop:実行.draggableにし、.droppable
の両方でそれを移動しようとしたので、空のVARS

チェックフィドルに問題がない：
https://jsfiddle.net/0apuqnxd/1/

HTML

は、

<div class='thisFlak' id='"+flakId+"'> 
<div class='flakUp'>Drop here</div> 
<div class='flakMiddle'><span class='flakCount'>NO drop</span></div> 
<div class='flakDown'>Or here</div> 

012 「上部」と「左」の特性は、それらの上に動作しないことを意味し、

<div class="elementsDiv" id="'.$row['element_nr'].'" style="width: 200px; height: 25px; background-color: #c2c2d6; cursor: move">Drag me 1</div> 
<div class="elementsDiv" id="'.$row['element_nr'].'" style="width: 150px; height: 35px; background-color: #c2c2d6; cursor: move">Drag me 2</div> 
<div class="elementsDiv" id="'.$row['element_nr'].'" style="width: 160px; height: 35px; background-color: #c2c2d6; cursor: move">Drag me 3</div> 

JS

//Make elements Draggable 
$('.elementsDiv').draggable({ 
    revert: 'invalid', 
    helper: 'clone', 
    opacity: '0.7', 
    stop: function(event, ui) { 
    //Move back element to dropped position 
    $(draggedElement).css('top', yPos).css('left', xPos); 
    } 
}); 

$('.flakUp, .flakDown').droppable({ 
    accept: '.elementsDiv', 
    over: function(event, ui) {}, 
    drop: function(event, ui) { 

    //Get dragged Element (checked) 
    draggedElement = $(ui.draggable); 

    //Get dropZone where element is dropped (checked) 
    dropZone = $(event.target); 

    //Move element from list, to dropZone (Change Parent, Checked) 
    $(dropZone).append(draggedElement); 

    //Get current position of draggable (relative to document) 
    var offset = $(ui.helper).offset(); 
    xPos = offset.left; 
    yPos = offset.top; 
    $('#posX').text('x: ' + xPos); 
    $('#posY').text('y: ' + yPos); 

    //Move back element to dropped position 
    $(draggedElement).css('top', yPos).css('left', xPos); 

    console.log(draggedElement.position()); 
    }, 
}); 

Answer 1

あなたのすべてのJavascriptコードは機能していますが、ここでの問題は、あなたのdivが静的に配置されていることです。

落ちた瞬間にabsoluteを配置して、指定された値に移動することをお勧めします。