Reverter elementos com drag'n drop

[Reverter elementos com drag'n drop]

Olá!

 

Esotu com uma certa dificuldade em um projeto que estou desenvolvendo em relação a funcionalidade drag and drop com jQuery/JavaScript.

 

<div class="pricipal-menu">

      <div class="col-1">
        <img src="imagem/1.png">
        <img src="imagem/2.png">
        <img src="imagem/3.png">
      </div>

      <div class="col-2">
        <img src="imagem/1.png">
        <img src="imagem/2.png">
        <img src="imagem/3.png">
      </div>

      <div class="col-3">
        <img src="imagem/1.png">
        <img src="imagem/2.png">
        <img src="imagem/3.png">
      </div>

      <div class="col-4">
        <img src="imagem/1.png">
        <img src="imagem/2.png">
        <img src="imagem/3.png">
      </div>
      
    </div>

Bom, o que quero fazer é, por exemplo, pegar a img1 da primeira coluna (1, 1) e passá-la para a coluna 2 na posição da img2  (2,2). Até ai tudo bem, o problema é , preciso que quando a img1 for colocada na posição (2,2) a img2 que está na vá para (1,1). Exatamente como um $(...).sortable(), aliás, já tentei até mesmo com o connectWith do sortable(), mas não adianntou muito.

 

Mais resumidamente, é fazer com que as imagens invertam a posição entre as colunas, mas não sei como.

 

OBS: já tentei, inclusíve, colocá-las em variáveis pra depois assumirem as posições com o drag'n drop, mas cheguei no mesmo resultado  do connectWith.

 

Agradeço a atenção!