Drag & Drop with jQuery does not place the element in the right DIV

Question

I’m trying to exchange two images when a user clicks on one image and drags to the other.

However, my code does not put the images in the correct position, it leaves the destination image in the same place and puts the image that was dragged in the <div> next, superimposing another image.

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<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>

Answer 1

Based on our comments, I took a look around the internet about the Sortable and found this post on Stack in English:

Stackoverflow in English

Basically you will use the Sortable within a table and modify your CSS to use inline-block to make

Here is jsFiddle for you to base and see working:

table + sortable

Here the code:

HTML

<table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
    <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr>
</table>

CSS

table {
    width: 330px;
    font-size: 0;/* eliminate spaces between TRs/TDs */
}
tr {
    display: inline;
}
td {
    display: inline-block;
    width: 100px;
    height: 100px;
    background: green;
    border: 0;
    border: 3px solid white;
    font-size: 20pt;
    color: white;
    line-height: 100px;
    vertical-align: middle;
    text-align: center;
}

.dnd-highlight {
    width: 100px;
    height: 100px;
    border: 3px dashed red;
    background: none;
}

Javascript

$('table').sortable({
    items: 'td', 
    placeholder: 'dnd-highlight'
});

You’ll have to modify according to your need, but that’s the idea.