title: drag and drop plotline angular2-highcharts typescript
body: <p>I want to add the drag and drop event functionality to the xAxis plotline in angular2 highcharts. The answer to this question has a good description of how to do it - <a href="https://stackoverflow.com/a/18484071/4567096">https://stackoverflow.com/a/18484071/4567096</a>. (<a href="http://jsfiddle.net/VXTeR/1/" rel="nofollow noreferrer">http://jsfiddle.net/VXTeR/1/</a> - link from answer) I am trying to adapt the code to angular2-highcharts. Being a newbie to TS/JS/Angular2, I am not sure what the mistakes are. The code I tried is:</p>
  
  <pre><code>import { Component,OnInit} from '@angular/core';
  import { CHART_DIRECTIVES, Highcharts } from 'angular2-highcharts';
  
  @Component({
  selector: 'smooth',
  directives: [CHART_DIRECTIVES],
  template:`&lt;chart [options]="options"&gt;&lt;/chart&gt;`
  
  
  })
  
  export class AppSmoothComponent 
  {options:Object;
  line;clickX;clickY;
  chart;
  
  ngOnInIt(){
  this.dranganddrop(this.chart)
  }
  
  dranganddrop=function(chart)
          {console.log(chart.xAxis[0].plotLinesAndBands[0]);
          this.line=chart.xAxis[0].plotLinesAndBands[0].svgElem.translate(0,0)
          .on('mousedown', this.start);
             }
  
  start = function (e) {
  
      $(document).bind({
          'mousemove.line': this.step,
              'mouseup.line': this.stop
      });
  
      this.clickX = e.pageX - this.line.translateX;
  
  }
  
  step = function (e) {
      this.line.translate(e.pageX - this.clickX, e.pageY - this.clickY)
  }
  stop = function () {
      $(document).unbind('.line');
  }          
  
  constructor(){
   this.options={
       xAxis:[{
           plotLines:[{value:3,width:6,color:'blue',id:'T1'}],
  
      }],
       series:[{
           data:[1,2,3,4,5],
           allowPointSelect:true
       }]
  
   }
   }
  
   }
  </code></pre>
  
  <p>I would appreciate any help in understanding how to make this work or a simpler way to add drag and drop to xAxis plotline.</p>