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
.
thank you so much