CODEWITHSUNDEEP
javascriptjqueryhtml
0xSina
0xSina

Reputation: 21553

mousemove not accurate for mouse position

I am trying to 'draw' a div within another div. I am using jquery's mousemove event to do this. This works, however, it's 'glitchy'. What I mean is, in mousemove event, the position of the mouse sometimes, is wrong. Especially when you move the mouse really fast.

I've created jsfiddle here: http://jsfiddle.net/zz32W/ , please take a look. Pay attention to the bottom right of the drawn div, it isn't always where your mouse/cursor is.

Here's the relevant code as well (you can see it in action on jsfiddle):

$(function() {

    var $test = $('#test');
    var $inner = $('#inner');

    var testOffset = $test.offset();
    var draging = false;
    var start_x, start_y;



    $test.mousedown(function(e) {
            draging = true;
            start_x = e.pageX - testOffset.left;
            start_y = e.pageY - testOffset.top;
    });

    $test.mouseup(function(e) {
        draging = false;
    });

    $test.mousemove(function(e) {
        if (draging) {
            console.log('moving');

            var end_x = e.pageX - testOffset.left;
            var end_y = e.pageY - testOffset.top;

            $inner.css({
                top: start_y+'px',
                left: start_y+'px',
                width: (end_x-start_x)+'px',
                height: (end_y-start_y)+'px'
            });
        }
    });

});

Any ideas how to solve this?

Thanks

Upvotes: 0

Views: 477

Answers (1)

0xSina
0xSina

Reputation: 21553

Found the issue. It was a typo. On line 31, 

    left: start_y+'px',

needs to be

    left: start_x+'px',

:)

Upvotes: 1

Related Questions