Question

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

我有一个带有div的“列表”...
为了使该列表“更新”并将div保持在一起，我使用jquery append将元素从列表移动到它的dropzone。

当我将元素附加到它的新父元素时，元素的位置将是左上角。
但是，我希望元素保持在掉落的位置。
所以我尝试保存掉落的位置，附加元素，然后将其移回到掉落的位置。

但元素想要移动到保存的下降位置我试图在.draggable和.droppable中移动它 .drop:首先运行，因此空的vars

没有问题

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>

<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，这样它们就会移动到给定的值。

在Jquery Drag＆amp; amp; amp; amp; amp;降

1 个答案: