Javascript 将元素移动到Jquery拖动后的位置（&A）；滴

我在放置元素时遇到问题。

我有一个带div的“列表”…
为了使列表“更新”并使div保持在一起，我使用jquery

append

将元素从列表移动到它的dropzone。

当我将元素附加到它的新父元素时，元素的位置将位于左上角。
但是对于corse，我希望元素保持在删除位置。
因此，我尝试保存删除的位置，附加元素，然后将其移回删除位置

但该元素需要移动到保存的放置位置。
我已尝试将其移动到

.draggable

和

.dropable

.drop:

首先运行，因此空变量没有问题

检查小提琴：

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>

---

所有Javascript代码都正常工作，但这里的问题是div是静态的，这意味着“top”和“left”属性对它们不起作用

---

一个很好的解决方法是在下降的瞬间将它们定位为

绝对值

，这样它们将移动到给定的值。

有趣的是，我将尝试这个！你能帮我更新一下小提琴吗，举个例子？

<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>

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