angularjs: draggable js

var startX = 0,startY = 0,x = 0,y = 0,minDragRang = 50;
var targetContainer = angular.element(document.getElementsByClassName(‘target-container-class‘));
var targetHeader = angular.element(document.getElementsByClassName(‘target-header-class‘));
targetHeader.css({
    position: ‘relative‘,cursor: ‘move‘
});
targetHeader.on(‘mousedown‘,function (event) {
    event.preventDefault();
    startX = event.pageX - x;
    startY = event.pageY - y;
    $document.on(‘mousemove‘,mousemove);
    $document.on(‘mouseup‘,mouseup);
});

function mousemove(event) {
    var headerHeiget = parseFloat($(‘.target-container-class‘).css(‘margin-top‘));
    var innerHeight = $(window).height();
    y = event.pageY - startY;
    if (y > (innerHeight - minDragRang - headerHeiget)) {
        y = innerHeight - minDragRang - headerHeiget;
    }
    if (y < -headerHeiget) {
        y = -headerHeiget;
    }
    x = event.pageX - startX;
    targetContainer.css({
        top: y + ‘px‘,left: x + ‘px‘
    });
    if (y < 0) {
        $(‘.container‘).css(‘overflow-y‘,‘auto‘);
    }else {
        $(‘.container‘).css(‘overflow-y‘,‘hidden‘);
    }
}

function mouseup() {
    $document.off(‘mousemove‘,mousemove);
    $document.off(‘mouseup‘,mouseup);
}