first of all, the custom file
drag.directive.ts
import {
Directive,
Input,
ElementRef,
Renderer2,
HostListener
} from "@angular/core";
import { DragDropService } from "../drag-drop.service";
@Directive({
selector: "[app-draggable][dragTag][draggedClass][dragData]"
})
export class DragDirective {
private _isDraggable = false;
@Input() dragTag: string;
@Input() draggedClass: string;
@Input() dragData: any;
@Input("app-draggable")
set isDraggable(draggable: boolean) {
this._isDraggable = draggable;
this.rd.setAttribute(this.el.nativeElement, "draggable", `${draggable}`);
}
get isDraggable() {
return this._isDraggable;
}
constructor(
private el: ElementRef,
private rd: Renderer2,
private service: DragDropService
) {}
@HostListener("dragstart", ["$event"])
onDragStart(ev: Event) {
if (this.el.nativeElement === ev.target) {
this.rd.addClass(this.el.nativeElement, this.draggedClass);
this.service.setDragData({ tag: this.dragTag, data: this.dragData });
}
}
@HostListener("dragend", ["$event"])
onDragEnd(ev: Event) {
if (this.el.nativeElement === ev.target) {
this.rd.removeClass(this.el.nativeElement, this.draggedClass);
}
}
}
drop.directive.ts
import {
Directive,
Input,
Output,
EventEmitter,
HostListener,
ElementRef,
Renderer2
} from "@angular/core";
import { DragDropService, DragData } from "../drag-drop.service";
@Directive({
selector: "[app-droppable][dropTags][dragEnterClass]"
})
export class DropDirective {
@Output() dropped: EventEmitter<DragData> = new EventEmitter();
@Input() dropTags: string[] = [];
@Input() dragEnterClass = "";
private drag$;
constructor(
private el: ElementRef,
private rd: Renderer2,
private service: DragDropService
) {
this.drag$ = this.service.getDragData().take(1);
}
@HostListener("dragenter", ["$event"])
onDragEnter(ev: Event) {
ev.preventDefault();
ev.stopPropagation();
if (this.el.nativeElement === ev.target) {
this.drag$.subscribe(dragData => {
if (this.dropTags.indexOf(dragData.tag) > -1) {
this.rd.addClass(this.el.nativeElement, this.dragEnterClass);
}
});
}
}
@HostListener("dragover", ["$event"])
onDragOver(ev: Event) {
ev.preventDefault();
ev.stopPropagation();
if (this.el.nativeElement === ev.target) {
this.drag$.subscribe(dragData => {
if (this.dropTags.indexOf(dragData.tag) > -1) {
this.rd.setProperty(ev, "dataTransfer.effectAllowed", "all");
this.rd.setProperty(ev, "dataTransfer.dropEffect", "move");
} else {
this.rd.setProperty(ev, "dataTransfer.effectAllowed", "none");
this.rd.setProperty(ev, "dataTransfer.dropEffect", "none");
}
});
}
}
@HostListener("dragleave", ["$event"])
onDragLeave(ev: Event) {
ev.preventDefault();
ev.stopPropagation();
if (this.el.nativeElement === ev.target) {
this.drag$.subscribe(dragData => {
if (this.dropTags.indexOf(dragData.tag) > -1) {
this.rd.removeClass(this.el.nativeElement, this.dragEnterClass);
}
});
}
}
@HostListener("drop", ["$event"])
onDrop(ev: Event) {
ev.preventDefault();
ev.stopPropagation();
if (this.el.nativeElement === ev.target) {
this.drag$.subscribe(dragData => {
if (this.dropTags.indexOf(dragData.tag) > -1) {
this.rd.removeClass(this.el.nativeElement, this.dragEnterClass);
this.dropped.emit(dragData);
this.service.clearDragData();
}
});
}
}
}
I want to execute the method I want when the specified element is dragged, and change the corresponding style
drap-drop.service.ts
import { Injectable } from "@angular/core";
import { BehaviorSubject } from "rxjs/BehaviorSubject";
import { Observable } from "rxjs/Observable";
export interface DragData {
tag: string; //
data: any; //
}
@Injectable()
export class DragDropService {
private _dragData = new BehaviorSubject<DragData>(null); //
setDragData(data: DragData) {
this._dragData.next(data);
}
getDragData(): Observable<DragData> {
return this._dragData.asObservable();
}
clearDragData() {
this._dragData.next(null);
}
}
task-home.component.html
<div class="task-lists">
<app-task-list
*ngFor="let list of lists"
app-droppable
[dropTags]="["task-item", "task-list"]"
[dragEnterClass]=""drag-enter""
[app-draggable]="true"
[dragTag]=""task-list""
[draggedClass]=""drag-start""
[dragData]="list"
(dropped)="handleMove($event, list)" >
<app-task-header [header]="list.name" (newTask)="launchNewTaskDialog()" (moveAll)="launchCopyTaskDialog()" (delList)="launchConfirm()"
(editList)="launchEditListDialog()">
</app-task-header>
<app-task-item class="list-container" *ngFor="let task of list.tasks" [item]="task" (taskClick)="launchUpdateTaskDialog(task)">
</app-task-item>
</app-task-list>
</div>
<button md-fab type="button" class="fab-button" (click)="launchNewListDialog()">
<md-icon>add</md-icon>
</button>
task-home.component.ts
import {
Component,
OnInit,
HostBinding,
ChangeDetectorRef,
ChangeDetectionStrategy
} from "@angular/core";
import { MdDialog } from "@angular/material";
import { NewTaskComponent } from "../new-task/new-task.component";
import { CopyTaskComponent } from "../copy-task/copy-task.component";
import { ConfirmDialogComponent } from "../../shared/confirm-dialog/confirm-dialog.component";
import { NewTaskListComponent } from "../new-task-list/new-task-list.component";
import { slideToright } from "../../anims/router.anim";
@Component({
selector: "app-task-home",
templateUrl: "./task-home.component.html",
styleUrls: ["./task-home.component.scss"],
animations: [slideToright],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class TaskHomeComponent implements OnInit {
@HostBinding("@routeAnim") state;
lists = [
{
id: 1,
name: "",
tasks: [
{
id: 1,
desc: ": ",
completed: true,
priority: 3,
owner: {
id: 1,
name: "",
avatar: "avatars:svg-11"
},
dueDate: new Date(),
reminder: new Date()
},
{
id: 2,
desc: ":ppt",
completed: false,
priority: 2,
owner: {
id: 1,
name: "",
avatar: "avatars:svg-12"
},
dueDate: new Date(),
reminder: new Date()
}
]
},
{
id: 2,
name: "",
tasks: [
{
id: 1,
desc: ": ",
completed: false,
priority: 1,
owner: {
id: 1,
name: "",
avatar: "avatars:svg-13"
},
dueDate: new Date(),
reminder: new Date()
},
{
id: 2,
desc: ":",
completed: false,
priority: 2,
owner: {
id: 1,
name: "",
avatar: "avatars:svg-12"
},
dueDate: new Date()
}
]
}
];
constructor(private dialog: MdDialog, private cd: ChangeDetectorRef) {}
ngOnInit() {}
launchNewTaskDialog() {
const dialogRef = this.dialog.open(NewTaskComponent, {
data: { title: "" }
});
}
launchCopyTaskDialog() {
const dialogRef = this.dialog.open(CopyTaskComponent, {
data: { lists: this.lists }
});
}
launchUpdateTaskDialog(task) {
const dialogRef = this.dialog.open(NewTaskComponent, {
data: { title: "", task: task }
});
}
launchConfirm() {
const dialogRef = this.dialog.open(ConfirmDialogComponent, {
data: { title: "", content: "" }
});
}
launchEditListDialog() {
const dialogRef = this.dialog.open(NewTaskListComponent, {
data: { title: "" }
});
dialogRef.afterClosed().subscribe(result => console.log(result));
}
launchNewListDialog() {
const dialogRef = this.dialog.open(NewTaskListComponent, {
data: { title: "" }
});
dialogRef.afterClosed().subscribe(result => console.log(result));
}
handleMove(srcData, list) {
console.log(srcData)
switch (srcData.tag) {
case "task-item":
console.log("handling item");
break;
case "task-list":
console.log("handling list");
break;
default:
break;
}
}
}
I want my handleMove ($event,list) method to execute, but there is no response.!
