draggable and resizable rectangle

user draws a rectangle and is able to move it around

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/5.0.12/highcharts.js"></script>
<div id="container" style="height: 600px; width:600px;"></div>

CSS

#container {
    border:1px solid;
}

.annotation { 
    transition: opacity 0.3s;
    border: 2px solid red;
}

JavaScript

$(function () {
    // the renderer
    var renderer = new Highcharts.Renderer($('#container')[0], 600, 600),

        r, isDown = false, anchorX, anchorY;

    $('#container').mousedown(function (e) {
        isDown = !isDown;
        anchorX = e.pageX;
        anchorY = e.pageY;        
        r = renderer.rect(anchorX, anchorY, 0, 0, 5)
            .attr({
            'stroke-width': 2,
            stroke: 'blue',
            fill: 'lightblue',
            zIndex: 3,
                class: 'annotation'                                
        }).add();
    });    

    $('#container').mousemove(function (e) {
        if (isDown) {
            var x = r.attr('x'),
                y = r.attr('y'),
                w = r.attr('width'),
                h = r.attr('height'),
                newX,
                newY,
                newWidth,
                newHeight;            
            newWidth = e.clientX - anchorX;
            newHeight = e.clientY - anchorY;           
            r.attr({
                x: newWidth < 0 ? e.clientX : anchorX,
                y: newHeight < 0 ? e.clientY : anchorY,
                width: newWidth < 0 ? Math.abs(newWidth) : newWidth,
                height: newHeight < 0 ? Math.abs(newHeight) : newHeight
            }).add();
        }
    });

});