Blotbands Draggable

author(s): Marcel Fromkorth Torstein Hønsi

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>

JavaScript

$(function () {
		function draggablePlotLineBand(axis, plotLineId, plotBandId, upperLine) {
        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 getPlotBand = function () {
            for (var i = 0; i < axis.plotLinesAndBands.length; i++) {
                if (axis.plotLinesAndBands[i].id === plotBandId) {
                    return axis.plotLinesAndBands[i];
                }
            }
        };
        
        var getFrom = function() {
            var plotBand = getPlotBand();
            var translation = axis.horiz ? plotBand.svgElem.translateX : plotBand.svgElem.translateY;
            var new_value = axis.toValue(translation) - axis.toValue(0) + plotBand.options.from;
            new_value = Math.max(axis.min, Math.min(axis.max, new_value));
            return new_value;
        };
        
        var getTo = function() {
            var plotBand = getPlotBand();
            var translation = axis.horiz ? plotBand.svgElem.translateX : plotBand.svgElem.translateY;
            var new_value = axis.toValue(translation) - axis.toValue(0) + plotBand.options.to;
            new_value = Math.max(axis.min, Math.min(axis.max, new_value));
            return new_value;
        };
        
        var getValue = function() {
            var plotLine = getPlotLine();
            var translation = axis.horiz ? plotLine.svgElem.translateX : plotLine.svgElem.translateY;
            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 drag_start = function (e) {
            $(document).bind({
                'mousemove.line': drag_step,
  ...