Creating simples drag and drop zones using Angular2. angular2 , dnd , drag , drop , drag and drop https://octoperf.com/blog/2016/05/27/angular2-drag-and-drop/ OctoPerf ZI Les Paluds, 276 Avenue du Douard, 13400 Aubagne, France +334 42 84 12 59 contact@octoperf.com Development 181 2021-01-04

Angular2: simple Drag and Drop

OctoPerf is JMeter on steroids!
Schedule a Demo

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:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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>
`
})
export class 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));
  }
}

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.
Angular2: simple Drag and Drop
Tags:
Share:
Comments (1)
Want to become a super load tester?
OctoPerf Superman