Angular2 Drag Drop demo. https://www.npmjs.com/package/ng2-drag-drop

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
  <title>ng2-drag-drop Demo</title>
</head>
<body>

<a href="https://github.com/ObaidUrRehman/ng2-drag-drop" class="hidden-xs">
  <img
    style="position: absolute; top: 0; right: 0; border: 0; z-index: 2000"
    alt="Fork me on GitHub"
    src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png">
</a>

<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Angular 2 drag drop</a>
    </div>
    <ul class="nav navbar-nav hidden-xs">
      <li><a href="#">Demo</a></li>
    </ul>
  </div>
</nav>

<div class="container-fluid" id="demo">
  <my-app>Loading demo...</my-app>
</div>

<script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
    <script src="https://unpkg.com/zone.js/dist/zone.js"></script>
    <script src="https://unpkg.com/zone.js/dist/long-stack-trace-zone.js"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script>
    <script src="https://unpkg.com/systemjs@0.19.31/dist/system.js"></script>

<script src="config.js"></script>

<script>
  System.import('app').catch(function (err) {
    console.error(err);
  });
</script>

</body>
</html>

/* Styles go here */

### Angular Starter Plunker - Typescript

System.config({
  //use typescript for compilation
  transpiler: 'typescript',
  //typescript compiler options
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  paths: {
    'npm:': 'https://unpkg.com/'
  },
  //map tells the System loader where to look for things
  map: {
    
    'app': './src',
    
    '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
    '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
    '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
    '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
    '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
    '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
    '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
    '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
    
    '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
    '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
    '@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
    '@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
    '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
    '@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
    '@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',
    
    'rxjs': 'npm:rxjs',
    'typescript': 'npm:typescript@2.0.2/lib/typescript.js',
    'ng2-drag-drop': 'npm:ng2-drag-drop/index.js'
  },
  //packages defines our app package
  packages: {
    app: {
      main: './main.ts',
      defaultExtension: 'ts'
    },
    rxjs: {
      defaultExtension: 'js'
    }
  }
});

//main entry point
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app';

platformBrowserDynamic().bootstrapModule(AppModule)

//our root app component
import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

import {Ng2DragDropModule} from "ng2-drag-drop";

@Component({
  selector: 'my-app',
  template: `
<div class="row">
   <div class="col-xs-3">
      <div class="panel panel-primary">
         <div class="panel-heading">Drag Items from here</div>
         <div class="panel-body scroll-list">
            <ul class="list-group">
               <li draggable *ngFor="let item of vegetables"
               [dragData]="item" class="list-group-item"
               [dragScope]="item.type">
               {{item.name}}
               </li>
            </ul>
            <ul class="list-group">
               <p class="text-justify">The following items can only be dragged by their handle.</p>
               <li draggable *ngFor="let item of fruits"
               [dragData]="item" class="list-group-item"
               [dragScope]="item.type"
               [dragHandle]="'.drag-handle'">
               {{item.name}}
               <div class="pull-right"><i class="drag-handle fa fa-bars fa-lg" aria-hidden="true"></i></div>
               </li>
            </ul>
         </div>
      </div>
   </div>
   <div class="col-xs-3">
      <div class="panel panel-info" droppable  [dragOverClass]="'drag-target-border'" [dropScope]="'fruit'"
      (onDrop)="onFruitDrop($event)">
      <div class="panel-heading">Drop Fruits here</div>
      <div class="panel-body scroll-list">
         <li *ngFor="let item of droppedFruits" class="list-group-item">{{item.name}}</li>
      </div>
   </div>
</div>
<div class="col-xs-3">
   <div class="panel panel-success" droppable [dragOverClass]="'drag-target-border-green'" [dropScope]="'vegetable'"
   (onDrop)="onVegetableDrop($event)">
   <div class="panel-heading">Drop Vegetables here</div>
   <div class="panel-body scroll-list">
      <li *ngFor="let item of droppedVegetables" class="list-group-item">{{item.name}}</li>
   </div>
</div>
</div>
<div class="col-xs-3">
   <div class="panel panel-info" droppable  [dragOverClass]="'drag-target-border'" [dropScope]="['fruit', 'vegetable']"
   (onDrop)="onAnyDrop($event)">
   <div class="panel-heading">Drop Anything here</div>
   <div class="panel-body scroll-list">
      <li *ngFor="let item of droppedItems" class="list-group-item">{{item.name}}</li>
   </div>
</div>
</div>
</div>
<h1>Swap List Demo</h1>
<div class="row">
   <div class="col-xs-3">
      <div class="panel panel-primary">
         <div class="panel-heading">Drag & Drop</div>
         <div class="panel-body scroll-list">
            <ul class="list-group">
               <li draggable *ngFor="let item of cars"

               [dragData]="item" class="list-group-item">
               {{item.name}}
               </li>
            </ul>
         </div>
      </div>
   </div>
   
         <div class = "col-xs-3">
         <div class="panel panel-primary">
            <div class="panel-heading">Drag & Drop</div>
            <div class="panel-body scroll-list">
               <ul class="list-group">
                  <li draggable *ngFor="let item of cars"

                  [dragData]="item" class="list-group-item">
                  {{item.name}}
                  </li>
               </ul>
            </div>
         </div>
      </div>
      
      
</div>

  `,
  styles: [`
    div.scroll-list {
      overflow: auto;
      max-height: 70vh;
    }
    
    .drag-over-border {
      border: #ff525b dashed 2px;
    }
    
    .drag-target-border {
       border: #00bfff dashed 2px;
    }

    .drag-target-border-green {
       border: #3c763d dashed 2px;
    }

    .drag-handle {
        cursor: move;
    }
   `
    ]
})
export class App {
  vegetables = [
        {name: "Carrot", type: "vegetable"},
        {name: "Onion", type: "vegetable"},
        {name: "Potato", type: "vegetable"},
        {name: "Capsicum", type: "vegetable"}];

    fruits = [
        {name: "Apple", type: "fruit"},
        {name: "Orange", type: "fruit"},
        {name: "Mango", type: "fruit"},
        {name: "Banana", type: "fruit"},
        {name: "Pear", type: "fruit"}];
        
    cars = [
      {name: 'Toyota'},
      {name: 'Bugati'},
      {name: 'Suzuki'},
      {name: 'Honda'},
      {name: 'BMW'}
      ];

    droppedFruits = [];
    droppedVegetables = [];
    droppedItems = [];

    onFruitDrop(e: any) {
        this.droppedFruits.push(e.dragData);
        this.removeItem(e.dragData, this.fruits);
    }

    onVegetableDrop(e: any) {
        this.droppedVegetables.push(e.dragData);
        this.removeItem(e.dragData, this.vegetables);
    }

    onAnyDrop(e: any) {
        this.droppedItems.push(e.dragData);

        if(e.dragData.type === 'vegetable')
            this.removeItem(e.dragData, this.vegetables);
        else
            this.removeItem(e.dragData, this.fruits);
    }

    removeItem(item: any, list: Array<any>) {
        let index = list.map((e) => {
            return e.name
        }).indexOf(item.name);
        list.splice(index, 1);
    }
}

@NgModule({
  imports: [ BrowserModule, Ng2DragDropModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {
  
}