JSFiddle - React, Tailwind, and code Playground

by ndelavi

HTML

<div class="painel-tabuleiro" onclick="drag(this)">
  <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>

JavaScript

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