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:

Be the first to comment

Thank you

Your comment has been submitted and will be published once it has been approved.

OK

OOPS!

Your post has failed. Please return to the page and try again. Thank You!

OK

Want to become a super load tester?
OctoPerf Superman