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.