How do I create a draggable plot line in Highcharts?

How do I create a draggable plotline in Highcharts? I couldn't find info about this. See please screenshot. You will see a green line on the screenshot. This plotline must be oriented on xAxis and draggable with max and min value on the axis Х. Can you help me? maybe some suggestion or link to official docs. Thank you in advanced. screenshot

see pls also some short video

https://drive.google.com/open?id=1sHeIZU1S5M15yxbzKWQrTE44pdrUz7PW

You can simply render the rect element using Highcharts.SVGRenderer class, and then handle appropriate events, to change the line position on drag. Everything should be able to achieve on chart.events.load handler. Here is a sample code:

  load() {
    var chart = this,
      lineWidth = 2,
      draggablePlotLine = chart.renderer.rect(100, chart.plotTop, lineWidth, chart.plotHeight)
      .attr({
        fill: 'blue'
      })
      .add();

    chart.container.onmousemove = function(e) {
      if (draggablePlotLine.drag) {
        let normalizedEvent = chart.pointer.normalize(e),
          extremes = {
            left: chart.plotLeft,
            right: chart.plotLeft + chart.plotWidth
          };

        // Move line
        if (
          e.chartX >= extremes.left &&
          e.chartX <= extremes.right
        ) {
          draggablePlotLine.attr({
            x: e.chartX
          })
        }
      }
    }

    draggablePlotLine.element.onmousedown = function() {
      draggablePlotLine.drag = true
    }

    draggablePlotLine.element.onmouseup = function() {
      draggablePlotLine.drag = false
    }

  }

Live exampe: https://jsfiddle.net/Lnj7ac42/

API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer