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
ReplyYour comment has been submitted and will be published once it has been approved.
OK
Your post has failed. Please return to the page and try again. Thank You!
OK