/**
 * Adds drag and drop functionality to pioneer-tree-node child elements
 */
import { Component, Input, HostListener, HostBinding } from '@angular/core';
import { IPioneerTreeExpandedNode } from "../../models/pioneer-tree-expanded-node.model"

@Component({
    selector: '[pioneer-tree-handle],[pt-handle]',
    template: `
<span class="pioneer-tree-handle">
    <ng-content>
    </ng-content>
</span>
    `
})
export class PioneerTreeHandleComponent {
    @Input() node: IPioneerTreeExpandedNode;

    @HostBinding('draggable')
    get draggable() {
        return true;
    }

    @HostListener('dragstart', ['$event'])
    onDragStart(event: Event) {
        console.log('drag started ' + event);
    }

    @HostListener('dragend')
    onDragEnd() {
        alert('drag ended');
    }
}
/**
 * Adds drag and drop functionality to pioneer-tree-node child elements
 */
import { Component, Input, HostListener } from '@angular/core';
import { IPioneerTreeExpandedNode } from "../../models/pioneer-tree-expanded-node.model"

@Component({
    selector: '[pioneer-tree-handle],[pt-handle]',
    template: `
<span class="pioneer-tree-handle">
    <ng-content>
    </ng-content>
</span>
    `
})
export class PioneerTreeHandleComponent {
    @Input() node: IPioneerTreeExpandedNode;

  @HostListener('dragstart', ['$event']) 
  onDragStart(event: Event) {
      console.log('drag started');
  }

  @HostListener('dragend')
  onDragEnd() {
    alert('drag ended');
  }
}
--- 
+++ 
@@ -1,7 +1,7 @@
 /**
  * Adds drag and drop functionality to pioneer-tree-node child elements
  */
-import { Component, Input, HostListener } from '@angular/core';
+import { Component, Input, HostListener, HostBinding } from '@angular/core';
 import { IPioneerTreeExpandedNode } from "../../models/pioneer-tree-expanded-node.model"
 
 @Component({
@@ -16,13 +16,18 @@
 export class PioneerTreeHandleComponent {
     @Input() node: IPioneerTreeExpandedNode;
 
-  @HostListener('dragstart', ['$event']) 
-  onDragStart(event: Event) {
-      console.log('drag started');
-  }
+    @HostBinding('draggable')
+    get draggable() {
+        return true;
+    }
 
-  @HostListener('dragend')
-  onDragEnd() {
-    alert('drag ended');
-  }
+    @HostListener('dragstart', ['$event'])
+    onDragStart(event: Event) {
+        console.log('drag started ' + event);
+    }
+
+    @HostListener('dragend')
+    onDragEnd() {
+        alert('drag ended');
+    }
 }
Enable draggle attribute on handle
