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', 

:)