h5: event handler as methods

src/dragdrop/dd-draggable.ts

@@ -54,6 +54,13 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt
     super();
     this.el = el;
     this.option = option;
+    // create var event binding so we can easily remove and still look like TS methods (unlike anonymous functions)
+    this.mouseDown = this.mouseDown.bind(this);
+    this.dragStart = this.dragStart.bind(this);
+    this.drag = this.drag.bind(this);
+    this.dragEnd = this.dragEnd.bind(this);
+    this.dragFollow = this.dragFollow.bind(this);
+
     this.init();
   }
 
@@ -106,11 +113,11 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt
     return this;
   }
 
-  private mouseDown = (event: MouseEvent): void => {
+  private mouseDown(event: MouseEvent): void {
     this.mouseDownElement = event.target as HTMLElement;
   }
 
-  private dragStart = (event: DragEvent): void => {
+  private dragStart(event: DragEvent): void {
     if (this.option.handle && !(
       this.mouseDownElement
       && this.mouseDownElement.matches(
@@ -149,7 +156,7 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt
     return this;
   }
 
-  private drag = (event: DragEvent): void => {
+  private drag(event: DragEvent): void {
     this.dragFollow(event);
     const ev = DDUtils.initEvent<DragEvent>(event, { target: this.el, type: 'drag' });
     if (this.option.drag) {
@@ -158,7 +165,7 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt
     this.triggerEvent('drag', ev);
   }
 
-  private dragEnd = (event: DragEvent): void => {
+  private dragEnd(event: DragEvent): void {
     if (this.dragFollowTimer) {
       clearTimeout(this.dragFollowTimer);
       delete this.dragFollowTimer;
@@ -229,7 +236,7 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt
     return this;
   }
 
-  private dragFollow = (event: DragEvent): void => {
+  private dragFollow(event: DragEvent): void {
     if (this.paintTimer) {
       cancelAnimationFrame(this.paintTimer);
     }

src/dragdrop/dd-droppable.ts

@@ -29,6 +29,12 @@ export class DDDroppable extends DDBaseImplement implements HTMLElementExtendOpt
     super();
     this.el = el;
     this.option = opts;
+    // create var event binding so we can easily remove and still look like TS methods (unlike anonymous functions)
+    this.dragEnter = this.dragEnter.bind(this);
+    this.dragOver = this.dragOver.bind(this);
+    this.dragLeave = this.dragLeave.bind(this);
+    this.drop = this.drop.bind(this);
+
     this.init();
   }
 
@@ -80,7 +86,7 @@ export class DDDroppable extends DDBaseImplement implements HTMLElementExtendOpt
     return this;
   }
 
-  protected dragEnter = (event: DragEvent): void => {
+  protected dragEnter(event: DragEvent): void {
     this.el.removeEventListener('dragenter', this.dragEnter);
     this.acceptable = this.canDrop();
     if (this.acceptable) {
@@ -97,12 +103,12 @@ export class DDDroppable extends DDBaseImplement implements HTMLElementExtendOpt
     this.el.addEventListener('dragleave', this.dragLeave);
   }
 
-  private dragOver = (event: DragEvent): void => {
+  private dragOver(event: DragEvent): void {
     event.preventDefault();
     event.stopPropagation();
   }
 
-  private dragLeave = (event: DragEvent): void => {
+  private dragLeave(event: DragEvent): void {
     if (this.el.contains(event.relatedTarget as HTMLElement)) { return; }
     this.el.removeEventListener('dragleave', this.dragLeave);
     this.el.classList.remove('ui-droppable-over');
@@ -119,7 +125,7 @@ export class DDDroppable extends DDBaseImplement implements HTMLElementExtendOpt
     this.el.addEventListener('dragenter', this.dragEnter);
   }
 
-  private drop = (event: DragEvent): void => {
+  private drop(event: DragEvent): void {
     if (this.acceptable) {
       event.preventDefault();
       const ev = DDUtils.initEvent<DragEvent>(event, { target: this.el, type: 'drop' });

src/dragdrop/dd-resizable-handle.ts

@@ -25,6 +25,11 @@ export class DDResizableHandle {
     this.host = host;
     this.dir = direction;
     this.option = option;
+    // create var event binding so we can easily remove and still look like TS methods (unlike anonymous functions)
+    this.mouseDown = this.mouseDown.bind(this);
+    this.mouseMove = this.mouseMove.bind(this);
+    this.mouseUp = this.mouseUp.bind(this);
+
     this.init();
   }
 
@@ -40,7 +45,7 @@ export class DDResizableHandle {
     return this;
   }
 
-  private mouseDown = (event: MouseEvent): void => {
+  private mouseDown(event: MouseEvent): void {
     this.mouseDownEvent = event;
     setTimeout(() => {
       document.addEventListener('mousemove', this.mouseMove, true);
@@ -55,7 +60,7 @@ export class DDResizableHandle {
     }, 100);
   }
 
-  private mouseMove = (event: MouseEvent): void => {
+  private mouseMove(event: MouseEvent): void {
     if (!this.started && !this.mouseMoving) {
       if (this.hasMoved(event, this.mouseDownEvent)) {
         this.mouseMoving = true;
@@ -68,7 +73,7 @@ export class DDResizableHandle {
     }
   }
 
-  private mouseUp = (event: MouseEvent): void => {
+  private mouseUp(event: MouseEvent): void {
     if (this.mouseMoving) {
       this.triggerEvent('stop', event);
     }