Arrastrar y cambiar en Angular

El problema que tengo es que necesito hacer un drag-n-swap pero no se como, solo conseguí hacer un drag-n-drop.

La idea es que voy a tener 8 div en una página, los cuales vendrán de un array de objetos y con un *ngFor los crearé con .col-md-3. Básicamente el funcionamiento que quiero es que si arrastro el div número 1 al sitio del 8, el 8 se cambie al del 1. Lo que hace normalmente sería que el 2 pasa a la posición del 1, el 3 a la del 2… y así hasta que llega al que acabo de mover.

¿Alguien sabe como puedo hacer esto?

En este ejemplo se muestra el funcionamiento que quiero, solo que no se hace con un array y lo que hace es cambiar la posición definida anteriormente mediante CSS (lo cual yo no tengo ya que las columnas se crean solas).

$  (document).ready(function () {      var box = $  (".box");     var mainCanvas = $  (".main-canvas");      box.draggable({         containment: mainCanvas,         helper: "clone",          start: function () {             $  (this).css({                 opacity: 0             });              $  (".box").css("z-index", "0");         },          stop: function () {             $  (this).css({                 opacity: 1             });         }     });      box.droppable({         accept: box,          drop: function (event, ui) {             var draggable = ui.draggable;             var droppable = $  (this);             var dragPos = draggable.position();             var dropPos = droppable.position();              draggable.css({                 left: dropPos.left + "px",                 top: dropPos.top + "px",                 "z-index": 20             });              droppable.css("z-index", 10).animate({                 left: dragPos.left,                 top: dragPos.top             });         }     });  });
.main-canvas {     outline: 1px solid #dddddd;;     width: 300px;     height: 300px;     margin: 50px auto 0;     position: relative; }  .box{     width: 100px;     height: 100px;     position: absolute;     top: 100px;     font-size: 24px;     color: #ffffff;     line-height: 100px;     text-align: center;     cursor: move; }  .box1 { left: 0; top: 0;  background-color: #E74C3C; } .box2 { left: 100px; top: 0; background-color: #8E44AD; } .box3 { left: 200px; top: 0; background-color: #5DADE2; } .box4 { left: 0; top: 100px; background-color: #1ABC9C; } .box5 { left: 100px; top: 100px; background-color: #F1C40F; } .box6 { left: 200px; top: 100px; background-color: #F39C12; } .box7 { left: 0; top: 200px; background-color: #34495E; } .box8 { left: 100px; top: 200px; background-color: #FF00FF; } .box9 { left: 200px; top: 200px; background-color: #008080; }
<html> 	<head> 		 <script src="https://code.jquery.com/jquery-1.12.4.js"></script>   <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 	 	</head> 	<body> 		<div class="container"> 	<div class="main-canvas">         <div class="box box1">1</div>         <div class="box box2">2</div>         <div class="box box3">3</div>         <div class="box box4">4</div>         <div class="box box5">5</div>         <div class="box box6">6</div>         <div class="box box7">7</div>         <div class="box box8">8</div>         <div class="box box9">9</div>     </div> </div> 	</body> </html>