Sort elements between divs with drag and drop

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 those elements with each other, I can put an element that is in col-1 with what's in col-2 for example, in a range of one, that is, I can only change an element with those that border on itself. I'm new with jQuery and I'm lost in how to do it using draggable () and droppable ().

The code for how the 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 have not used jQuery here and this script does not make the switch because I am 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);
}