title: Angular2 draggable directive, draggable="false" not working
body: <p>I've tried to implement draggable directive for my component and I noticed that I am unable to stop dragging components when I try to set draggable attribute to false. I can see in DOM that it is set to false, but it seems like it's being ignored and I can drag the element regardless to draggable="false". </p>
  
  <pre><code>import { Directive, ElementRef, Renderer, OnDestroy, OnInit, Input } from '@angular/core';
  
  @Directive({
      selector: '[dnddraggable]',
      host: {
          '(drag)': 'onDrag($event)'
      }
  })
  
  export class DraggableDirective implements OnDestroy, OnInit {
      @Input('draggableConfig') config: any; // config object
      @Input('canvas') canvasEl: ElementRef; // canvas that this element belongs to
      private draggedEl: ElementRef; // DOM element that is being dragged
      private draggableWidth; // width of dragged element
      private draggableHeight; // height of dragged element
      private boundaries: any = {}; // boundaries where element can be dragged
      private boundaryEl: ElementRef; // e.g. canvas
  
      constructor(
          private el: ElementRef, // reference to directives element
          private renderer: Renderer // renderer to set element style
  
      ) {
  
      }
  
      public ngOnInit(): void {
          // this.renderer.setElementAttribute(this.el.nativeElement, 'draggable', 'false');
  
          this.draggedEl = this.el.nativeElement;
          this.draggableWidth = this.draggedEl.clientWidth;
          this.draggableHeight = this.draggedEl.clientHeight;
  
          if (this.config.hasBoundaries) {
              this.boundaryEl = this.config.boundaryObject;
              this.calculateBoundaries();
          }
  
          this.disableDragging();
      }
  
      // change position of element when being dragged
      onDrag(event: MouseEvent) {
          event.preventDefault();
          // when dragged, change position according to mouse position, check boundaries if needed
          if (this.config.hasBoundaries) {
              if (this.isInBoundaries(event)) {
                  this.changePosition(event);
              }
          } else {
              this.changePosition(event);
          }
      }
  
      enableDragging() {
          this.renderer.setElementAttribute(this.draggedEl, 'draggable', 'true');
      }
  
      disableDragging() {
          this.renderer.setElementAttribute(this.draggedEl, 'draggable', 'false');
      }
  
      // change left and top css style
      changePosition(event: MouseEvent) {
          this.renderer.setElementStyle(this.draggedEl, 'left', event.changedPointers[0].pageX -
              (this.draggableWidth / 2) - this.canvasEl.offsetLeft + 'px');
          this.renderer.setElementStyle(this.draggedEl, 'top', event.changedPointers[0].pageY -
              (this.draggableHeight / 2) - this.canvasEl.offsetTop + 'px');
      }
  
      // if draggable should be moved only inside certain boundaries, calculate them
      calculateBoundaries() {
          this.boundaries = {
              left : this.boundaryEl.firstChild.offsetLeft + (this.draggableWidth / 2),
              right : this.boundaryEl.firstChild.clientWidth + this.boundaryEl.firstChild.offsetLeft -
                  (this.draggableWidth / 2),
              top : this.boundaryEl.firstChild.offsetTop + (this.draggableHeight / 2),
              bottom : this.boundaryEl.firstChild.clientHeight +
                  this.boundaryEl.firstChild.offsetTop - (this.draggableHeight / 2),
          };
      }
  
      // check if dragged element is still inside boundaries
      isInBoundaries(event: MouseEvent) {
          return event.changedPointers[0].pageX &gt; this.boundaries.left &amp;&amp;
              event.changedPointers[0].pageX &lt; this.boundaries.right &amp;&amp;
              event.changedPointers[0].pageY &gt; this.boundaries.top &amp;&amp;
              event.changedPointers[0].pageY &lt; this.boundaries.bottom;
      }
  
      public ngOnDestroy(): void {
          this.renderer.setElementAttribute(this.draggedEl, 'draggable', 'false');
      }
  }
  </code></pre>