使Plotline标签在highcharts中可拖动

Question

我在higcharts中有draggble plotline，使用它的“label”选项我在图表上创建了一个拖动图像元素，如何使标签也随着情节线一起拖动，

我到目前为止尝试过的代码如下：

$(function () {
var line,
clickX
var start = function (e) {
    $(document).bind({
        'mousemove.line': step,
        'mouseup.line': stop
    });

    clickX = e.pageX - line.translateX;
    //clickY = e.pageY - line.translateY; //uncomment if plotline should be also moved vertically
}

var step = function (e) {
    line.translate(e.pageX - clickX)
}

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

$('#ao-salesoptimization-graph').highcharts({
    chart: {
        type: 'spline',
            padding: 0
     },
    title: {
        text: ''
    },
    subtitle: {
        text: ''
    },
    legend: {
        enabled: false,
    },
    credits: {
        enabled: false
    },
    exporting: {
        enabled: false
    },  
    xAxis: {
        gridLineColor: '#eeeeee',
        gridLineWidth: 1,
        type: 'datetime',
        labels: {
            enabled :false
        },
        plotLines: [{
            color: '#004a80',
            dashStyle: 'Dot',
            value: Date.UTC(2014, 7, 10), // Value of where the line will appear
            width: 5,// Width of the line
            zIndex: "10",
            label: {
                align: 'bottom',
                verticalAlign: "bottom",
                text: "",                    
            }
        }],
        tickWidth: 0
    },
    plotOptions: {
        series: {
            marker: {
                fillColor: '#FFFFFF',
                lineWidth: 2,
                lineColor: "#4b0081" 
            }
        }
    },
    yAxis: {
        gridLineColor: '#eeeeee',
        gridLineWidth: 1,
        min: 10000,
        max: 100000,
        title: {
            text: '',               
        },
        label: {
            formatter: function () {
                return (this.y / 1000) + "k"
            }
        },
        tickWidth: 1,

    },
    series:  salesoptimizationgraphhData()
}, function (chart) {

    line = chart.xAxis[0].plotLinesAndBands[0].svgElem.attr({
        stroke: 'blue'            
    })
        .css({
            'cursor': 'pointer'
        })
        .translate(0, 0)
        .on('mousedown', start);
}); });

用于创建拖动图像的CSS：

#ao-salesoptimization-graph .highcharts-container span {
background-image: url('../../Img/ao-chart-scroller.png');
background-repeat: no-repeat;
position: absolute;
z-index: 1000;
transform: rotate(0deg) !important;
top: 310px !important;
width: 64px;
height: 24px;
cursor: pointer;
z-index: 10; }

输出图片：

我想在下方标记“按钮”也可以拖动，

工作JSFIDDLE is here