Sort widgets between drag and drop Ivs

Question

Good afternoon.

I’m doing a personal project and in it I have several Divs with Divs inside and I need to be able to exchange these elements with each other, I can put an element that is in col-1 with what is in col-2 for example, in a range of one, I mean, I can only exchange one element with those who border on themselves. I’m new to jQuery and I’m lost in how to do using draggable() and droppable().

The code for how Divs are structured is as follows:.

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

Javascript done. I did not use jQuery here and this script does not change because I’m not sure how to get the location where the image came from.

var elements = [];

function dragUser(element, event) {
    var index = elements.indexOf(element);
    if (index == -1) {
        // not already existing in the array, add it now
        elements.push(element);
        index = elements.length - 1;
    }
    event.dataTransfer.setData('index', index);
}

function dropUser(target, event) {
    var element = elements[event.dataTransfer.getData('index')];
    target.appendChild(element);
}