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

Question

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

Navigation

#1 by (1 votes)

1

I'm trying to perform two image swapping when a user clicks on an image and drags the other image.

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 <div> following, overlapping 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><divclass="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>

javascript jquery jquery-ui

asked by anonymous 07.11.2018 / 00:46

1 answer

Generate HTML components with PHP and assign them javascript characteristics Primefaces, how to export Header and Footer from dataTable

score 1 · Accepted Answer

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

StackOverflow in English

Basically you will use Sortable within table and modify your CSS to use inline-block to do

Here's the jsFiddle for you to base and see working:

table + sortable

Here is 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 will have to modify it according to your need, but the idea is this.