title: Angular 7 drag Drop swapping elements
body: <p>I'm trying to use the new Angular 7 CDK Drag and drop to move a list of elements. But didnt found any option to swap element mostly all the example given are for sorting elements.</p>
  
  <p><a href="https://stackblitz.com/angular/pxgqrvaqbxeg?file=app%2Fcdk-drag-drop-sorting-example.ts" rel="noreferrer">https://stackblitz.com/angular/pxgqrvaqbxeg?file=app%2Fcdk-drag-drop-sorting-example.ts</a></p>
  
  <p><strong>cdk-drag-drop-sorting-example.htm</strong></p>
  
  <pre><code>&lt;div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)"&gt;
    &lt;div class="example-box" *ngFor="let movie of movies" cdkDrag&gt;{{movie}}&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>cdk-drag-drop-sorting-example.ts</strong></p>
  
  <pre><code>import {Component} from '@angular/core';
  import {CdkDragDrop, moveItemInArray} from '@angular/cdk/drag-drop';
  
  /**
   * @title Drag&amp;Drop sorting
   */
  @Component({
    selector: 'cdk-drag-drop-sorting-example',
    templateUrl: 'cdk-drag-drop-sorting-example.html',
    styleUrls: ['cdk-drag-drop-sorting-example.css'],
  })
  export class CdkDragDropSortingExample {
    movies = [
      'Episode I - The Phantom Menace',
      'Episode II - Attack of the Clones',
      'Episode III - Revenge of the Sith',
      'Episode IV - A New Hope',
      'Episode V - The Empire Strikes Back',
      'Episode VI - Return of the Jedi',
      'Episode VII - The Force Awakens',
      'Episode VIII - The Last Jedi'
    ];
  
    drop(event: CdkDragDrop&lt;string[]&gt;) {
      moveItemInArray(this.movies, event.previousIndex, event.currentIndex);
    }
  }
  </code></pre>
  
  <p>For eg: If drag for element 0 is initiated and dropped at element 4, in that case element 0 dom should be replaced with element 4 and vice versa.</p>