~

https://octoperf.com/blog/2016/05/27/angular2-drag-and-drop/

import { Component } from'angular2/core';

@Component({ selector: 'dnd', directives: [], styles: [` .container{ border: 1px solid red; width: 336px; height: 69px; } `],

template: ` <div id="div1" class="container" (drop)="drop($event)" (dragover)="allowDrop($event)">

<img id="drag1" src="http://www.w3schools.com/html/img_w3slogo.gif"

draggable="true" (dragstart)="drag($event)" width="336" height="69"> </div> <div id="div2" class="container" (drop)="drop($event)" (dragover)="allowDrop($event)"></div> ` })

exportclass DnD {

allowDrop(ev) {

ev.preventDefault();

}

drag(ev) {

ev.dataTransfer.setData("text", ev.target.id);

}

drop(ev) {

ev.preventDefault();

var data = ev.dataTransfer.getData("text");

ev.target.appendChild(document.getElementById(data));

}

}