拖放元素放错 div

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

Drag and Drop put element on wrong div

javascript

jquery

jquery-ui-draggable