jQuery Drag e Drop não colocam o elemento na div certa

rico007
(usa elementary OS)

Enviado em 06/11/2018 - 20:51h

Eu estou tentando realizar a troca de duas imagens quando um usuário clica em usa e arrasta até a outra. Porém, o meu código não coloca as imagens na posição correta, ele deixa a imagem de destino no mesmo lugar e poe a imagem que foi arrastada na div seguinte, sobrepusendo uma outra imagem. Alguém poderia me ajudar? Sou iniciante em jQuery.

Aqui esta a estrutura das minhas divs

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

E esta é a parte da função em jQuery responsável por fazer a troca.

    $(".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());
      },
    });
 

Obrigado.