File
Implements
Metadata
| encapsulation |
ViewEncapsulation.None |
| selector |
app-drag-and-drop |
| styleUrls |
drag-and-drop.component.css |
| templateUrl |
./drag-and-drop.component.html |
|
blah
|
blah:
|
Default value : 0
|
|
|
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { Subject } from 'rxjs/Subject';
@Component({
selector: 'app-drag-and-drop',
templateUrl: './drag-and-drop.component.html',
styleUrls: ['./drag-and-drop.component.css'],
encapsulation: ViewEncapsulation.None
})
export class DragAndDropComponent implements OnInit {
inc = new Subject<number>();
blah = 0;
constructor() { }
ngOnInit() {
}
onInc() {
console.log('inc');
this.blah++;
this.inc.next();
}
}
<p>
This is still a work in progress.
</p>
<p>
The drop location is calculated off of
the center of the element being dragged.
</p>
<p>
Not the mouse cursor.
</p>
<button (click)="onInc()">Inc</button>
<foo [inc]="inc.asObservable() | async" [cnt]="blah"></foo>
<div >
<ul uatDnDContainer>
<li *uatDraggable style="padding: 14px; background-color: blue"><span>Item 1</span></li>
<li *uatDraggable style="padding: 14px; background-color: green"><span>Item 2</span></li>
<li *uatDraggable style="padding: 14px; background-color: yellow"><foo [inc]="inc.asObservable() | async" [cnt]="blah"></foo></li>
</ul>
</div>
Legend
Html element with directive