jQuery Draggable - 图像地图线条图

Question

就像标题所说，我正在为图像地图做一些线条画。问题是我的鼠标离原始坐标越远，线条绘制的速度越慢。我的数学显然有问题。一个对数学有好处的人可以为我检查这个并告诉我什么是错的吗？

    $('map area.dp').draggable({
    axis: 'x',
    cursor: 'crosshair',
    helper: function (e) {
        var h = $('<div class="drag-helper"></div>').attr('name', $(this).attr('name'));
        return h;
    },
    start: function (e, ui) {

        //orignal "constant" datapoint coords
        oX = parseInt(this.coords.split(',')[0]);
        oY = parseInt(this.coords.split(',')[1]);

        //ratio = "variable" mouse position / orginal data point
        ratX = e.pageX / oX;
        ratY = e.pageY / oY;


        //set new datapoint to draw line to by dividing mouse poistion by ratio as mouse moves across the screen
        ui.offset.left = e.pageX / ratX;
        ui.offset.top = e.pageY / ratY;

        var scrlTp = $('html')[0].scrollTop;
        var scrlLft = $('html')[0].scrollLeft;

        ui.offset.left -= scrlLft;
        ui.offset.top -= scrlTp;


        ui.position.left = ui.offset.left

        ui.helper.css('top', (ui.offset.top) + 'px');
        ui.helper.css('left', (ui.offset.left) + 'px');

        var d = $('<div id="DragLine"></div>').css('top', (ui.offset.top) + 'px').css('left', (ui.offset.left) + 'px').appendTo($('map'));
    },
    drag: function (e, ui) {


        var scrlTp = $('html')[0].scrollTop;
        var scrlLft = $('html')[0].scrollLeft;

        ui.offset.left = e.pageX / ratX
        ui.offset.top = e.pageY / ratY

        ui.offset.left -= scrlLft;
        ui.offset.top -= scrlTp;

        ui.position.left = ui.offset.left;

        if (ui.offset.left > px100) {
            ui.offset.left = px100;
            ui.position.left = px100;
        }


        var diff = (ui.position.left - ui.originalPosition.left);
        if (diff < 0) {
            $('#DragLine').css('left', (ui.position.left + 4) + 'px').css('width', (diff * -1) + 'px');
        }
        else {
            $('#DragLine').css('left', (ui.originalPosition.left + 4) + 'px').css('width', diff + 'px');
        }

        ui.helper.text(pxToVal(ui.position.left));
    },
    stop: function (e, ui) {
        $('#DragLine').remove();

        var mp = $('#MainForm #Settings_MovedPoints');
        var key = ui.helper.attr('name');
        var val = pxToVal(ui.position.left);
        strPts = mp.val();
        var pts;
        if (strPts) {
            pts = JSON.parse(strPts);
        }

        //set the new dictionary
        if (!pts) { pts = {}; }
        pts[key] = val;

        strPts = JSON.stringify(pts);
        mp.val(strPts);

        $('#MainForm').submit();
    }

})