Angular2: simple Drag and Drop

Angular2: simple Drag and Drop

We are using drag and drop extensively for creating virtual users in OctoPerf.

As I plan to migrate to Angular2, today I wanted to check how to handle drag and drop in the future of AngularJS.

I started from the W3Schools plain HTML / JS example and created the following component:

Need professional services?
Rely on our Expertise
import { Component } from 'angular2/core';

  selector: 'dnd',
  directives: [],
  styles: [`
     border: 1px solid red;
     width: 336px;
     height: 69px;
  template: `
<div id="div1" class="container" (drop)="drop($event)" (dragover)="allowDrop($event)">
<img id="drag1" src="" draggable="true"
  (dragstart)="drag($event)" width="336" height="69">

<div id="div2" class="container" (drop)="drop($event)" (dragover)="allowDrop($event)"></div>
export class DnD {

  allowDrop(ev) {

  drag(ev) {

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

It's simple as that. The only things that need to be changed are

  • The drop methods: ondrop becomes (drop),
  • The event parameter becomes $event.
Want to become a super load tester?
Request a Demo