Javascript highcharts拖放事件绑定

我有一个highchart，它有两条绘图线和一个在这两条绘图线之间延伸的绘图带。我已经将拖放事件添加到这三个事件中（多亏了，通过这里的另一个答案可以找到）

拖放线A和B时，我希望更新plotband，使其仍在A和B的新位置之间延伸。如果通过删除和添加plotband或更新轴来执行此操作，我将无法再拖放plotband，事件将不再绑定到它

要克服这一问题，我可以做的一件事是转换plotband元素，但我不确定应该如何准确地提及转换参数-由于某些原因，当转换参数是基于绘图线的拖放动态生成时，转换不会按预期进行

我想知道是否有办法删除和添加plotband，但仍然保持拖放功能。这将特别有用，因为我希望能够拖放plotband，并更改A和B的位置，使它们也位于plotband的开始和结束位置

我的代码如下

@Component({
selector: 'smooth',
directives: [CHART_DIRECTIVES],
styles: [`
chart {
  display: block;
 }
`],
template: `<chart [options]="options" (load)="load($event.context)"></chart>
           `

})



export class AppSmoothComponent 
{ options={
  xAxis:{plotLines:[{value:3,color:'red',width:5,id:'A',label:  {text:'A',rotation:0,x:-18,style:{color:'red',fontWeight:'bold'}}},
                {value:5,color:'red',width:5,id:'B',label:{text:'B',rotation:0,x:+12,style:{color:'red',fontWeight:'bold'}}}],

     plotBands:[{color:'green',from:3,to:5,id:'Band',label:'Band'}]

     },
 series:[{data:[[1,2],[3,4],[5,6],[7,8],[9,10]]}],

      }
 constructor(){}

 draggablePlotLine(axis,plotlineID)

 {

  var clickX,clickY;


  var getPlotLine = function(){
    for(var i=0;i<axis.plotLinesAndBands.length;i++)
    { 
      if(axis.plotLinesAndBands[i].id===plotlineID)
      { 
        return axis.plotLinesAndBands[i]}
      }

   }

    var givenPlotLine = function(plotlineID){
    for(var i=0;i<axis.plotLinesAndBands.length;i++)
    { 
      if(axis.plotLinesAndBands[i].id===plotlineID)
      { 
        return axis.plotLinesAndBands[i]}
      }

   }

   var getValue=function(){
          var plotLine=getPlotLine();
          var translation=plotLine.svgElem.translateX;
          var new_value=axis.toValue(translation)-axis.toValue(0)+plotLine.options.value;
          new_value=Math.max(axis.min,Math.min(axis.max,new_value));
          return new_value; 
    }

  var getLabel=function(){
     var plotLine=getPlotLine();
     var label=plotLine.options.label;
     return label;
  }


   var drag_start = function(e){

    $(document).bind({
      'mousemove.line':drag_step,
      'mouseup.line':drag_stop
    })

    var plotLine=getPlotLine();

    clickX=e.pageX-plotLine.svgElem.translateX;
   }

   var drag_step = function (e) {

       var plotLine = getPlotLine();
       var label=plotLine.options.label;
       var new_translation = e.pageX - clickX ;
       var new_value;
       if(plotlineID=='Band'){new_value=axis.toValue(new_translation) - axis.toValue(0);
                             new_value = Math.max(axis.min, Math.min(axis.max, new_value));
                             new_translation = axis.toPixels(new_value + axis.toValue(0));
                             }
       else {

      new_value = axis.toValue(new_translation) - axis.toValue(0) + plotLine.options.value;
      new_translation = axis.toPixels(new_value + axis.toValue(0) - plotLine.options.value);}

       plotLine.svgElem.translate(new_translation,0);


       };

  var drag_stop = function () {
        $(document).unbind('.line');

        var plotLine = getPlotLine();

        var plotLineOptions = plotLine.options;
        console.log(plotLineOptions);

        var label=plotLine.label;
        //Remove + Re-insert plot line
        //Otherwise it gets messed up when chart is resized
        if (plotLine.svgElem.hasOwnProperty('translateX')) {

            if(plotlineID=='Band'){ 
              axis.removePlotBand(plotLineOptions.id);
              axis.addPlotBand(plotLineOptions); 
                                  }
            else{
            plotLineOptions.value = getValue()
            axis.removePlotLine(plotLineOptions.id);
            axis.addPlotLine(plotLineOptions); 
            console.log(axis.plotLinesAndBands[2]);
            if(plotlineID=='A')
            {var Boptions=givenPlotLine('B')
             console.log(Boptions);
             axis.removePlotBand('Band');
               axis.addPlotBand({from:plotLineOptions.value,to:Boptions.options.value,id:'Band'                 ,color:'green'})}
            else if(plotlineID=='B')
              {console.log(plotLineOptions.value,axis.plotLinesAndBands[0].options.value)
            var Aoptions=givenPlotLine('A')
            axis.removePlotBand('Band');
            axis.addPlotBand({from:Aoptions.options.value,to:plotLineOptions.value,id:'Band',color:'green'});
            }
            }
        }



    getPlotLine().svgElem
            .css({'cursor': 'pointer'})
            .translate(0, 0)
            .on('mousedown', drag_start);



        };

   drag_stop();


  }

  load(instance) {
  this.draggablePlotLine(instance.xAxis[0],'A');
  this.draggablePlotLine(instance.xAxis[0],'B');
  this.draggablePlotLine(instance.xAxis[0],'Band');

  console.log('ready');

   }


   }         

@组件({
选择器：“平滑”，
指令：[图表_指令]，
风格：[`
图表{
显示：块；
}
`],
模板：`
`
})
导出类AppSmoothComponent
{选项={
xAxis:{plotLines:[{value:3，color:'red'，width:5，id:'A'，label:{text:'A'，rotation:0，x:-18，style:{color:'red'，fontwweight:'bold'}}，
{值：5，颜色：'red'，宽度：5，id:'B'，标签：{文本：'B'，旋转：0，x:+12，样式：{color:'red'，fontwweight:'bold'}}}}]，
plotBands:[{颜色：'green'，from:3，to:5，id:'Band'，标签：'Band'}]
},
系列：[{数据：[[1,2]，[3,4]，[5,6]，[7,8]，[9,10]}，
}
构造函数（）{}
DragTablePlotLine（轴，plotlineID）
{
变量clickX，clickY；
var getPlotLine=函数（）{
对于（var i=0；我想知道如何翻译plotBand。手动翻译plotBand（使用硬编码值）时是否也会出现“翻译未按预期进行”错误？感谢@Grzegorz Blachliński的回复。如果打印带是硬编码的，则可以正常转换打印带，但应用此功能的问题是：移动其中一条打印线时，打印带的宽度不是常数。如果打印带存在于2到3之间，而我将线a移动到1，则我希望打印带存在于1到3之间。如果如果我更新from和to参数，我就不能再拖放了。