mousemove 对于鼠标位置不准确

Question

我正在尝试在另一个 div 中“绘制”一个 div。我正在使用jquery 的mousemove 事件来执行此操作。这行得通，但是，它“有问题”。我的意思是，在 mousemove 事件中，鼠标的位置有时是错误的。尤其是当您快速移动鼠标时。

我在这里创建了 jsfiddle：http://jsfiddle.net/zz32W/，请看一下。注意绘制的 div 的右下角，它并不总是鼠标/光标所在的位置。

这也是相关代码（你可以在 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'
            });
        }
    });

});

有什么办法解决这个问题吗？

谢谢

Answer 1

发现问题。这是一个错字。在第 31 行，

    left: start_y+'px',

需要

    left: start_x+'px',

:)