feat(components/tree): add draggable ability to tree component

sam688 · Jul 17, 2020 · f4dad58 · f4dad58
1 parent 16e2c23
commit f4dad58
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 0 deletions.
diff --git a/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.html b/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.html
@@ -1,4 +1,5 @@
 <nz-tree
+  [nzDraggable]="draggable"
   [nzCheckStrictly]="checkStrictly"
   [nzCheckable]="checkable"
   [nzCheckedKeys]="checkedKeys"
@@ -7,6 +8,7 @@
   [nzExpandedKeys]="expandedKeys"
   (nzExpandChange)="onExpandedKeysChange($event)"
   (nzCheckBoxChange)="onCheckboxChange($event)"
+  (nzOnDrop)="onDrop($event)"
 ></nz-tree>
 <ng-template #treeTemplate let-node>
   <div

diff --git a/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.ts b/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.ts
@@ -7,6 +7,7 @@ import {
   TemplateRef,
   ViewEncapsulation,
 } from '@angular/core';
+import { NzFormatEmitEvent } from 'ng-zorro-antd/tree';
 
 @Component({
   selector: 'abp-tree',
@@ -22,6 +23,8 @@ export class TreeComponent {
   @Output() readonly checkedKeysChange = new EventEmitter();
   @Output() readonly expandedKeysChange = new EventEmitter<string[]>();
   @Output() readonly selectedNodeChange = new EventEmitter();
+  @Output() readonly drop = new EventEmitter<NzFormatEmitEvent>();
+  @Input() draggable: boolean;
   @Input() checkable: boolean;
   @Input() checkStrictly: boolean;
   @Input() checkedKeys = [];
@@ -44,4 +47,11 @@ export class TreeComponent {
     this.expandedKeys = [...event.keys];
     this.expandedKeysChange.emit(event.keys);
   }
+
+  onDrop(event: NzFormatEmitEvent) {
+    event.event.stopPropagation();
+    event.event.preventDefault();
+
+    this.drop.emit(event);
+  }
 }