Question

当用户单击一个元素并将其拖到另一个元素上时，我尝试与jQuery Draggable交换两个图像。但是，我的代码没有将图像放置在正确的位置。它将目标图像保留在同一位置，并将拖动的图像放置在下一个div上，与另一图像重叠。有谁能够帮助我？我是jQuery的新手。

HTML结构：

<div class="painel-tabuleiro">
  <div class="col-1">
    <div class="containerImg"><img class="elemento" src="imagem/1.png"/></div>
    <div class="containerImg"><img class="elemento" src="imagem/1.png"/></div>
    <div class="containerImg"><img class="elemento" src="imagem/1.png"/></div>

  </div>
  <div class="col-2">
    <div class="containerImg"><img class="elemento" src="imagem/2.png"/></div>
    <div class="containerImg"><img class="elemento" src="imagem/2.png"/></div>
    <div class="containerImg"><img class="elemento" src="imagem/2.png"/></div>

  </div>
  <div class="col-3">
    <div class="containerImg"><img class="elemento" src="imagem/3.png"/></div>
    <div class="containerImg"><img class="elemento" src="imagem/3.png"/></div>
    <div class="containerImg"><img class="elemento" src="imagem/3.png"/></div>

  </div>
  <div class="col-4">
    <div class="containerImg"><img class="elemento" src="imagem/4.png"/></div>
    <div class="containerImg"><img class="elemento" src="imagem/4.png"/></div>
    <div class="containerImg"><img class="elemento" src="imagem/4.png"/></div>

  </div>
</div>

相关的jQuery代码：

$(".elemento").draggable();
$(".containerImg").droppable({
  drop: function(event, ui) {
    var dropped = ui.draggable;
    var droppedOn = event.target;
    $(dropped).css({top: 0,left: 0}).appendTo(droppedOn);
    $(droppedOn.querySelector('img')).css({top: 0,left: 0}).appendTo(dropped.parent());
  },
});

Answer 1

您需要在应用职位之前设置延迟时间，因为您的职位已被插件覆盖。

$(droppedOn.querySelector('img')).css({top: 0,left: 0})

将其更改为类似的内容

setTimeout(function() {
  $(droppedOn).find('img').css({
    top: 0,
    left: 0
  });
}, 10);

您也可以将.css()更改为.animate()，使其具有动画效果。

Working example

将元素拖放到错误的div上

1 个答案: