在javascript中跳轉div/jquery

Question

我不知何故努力修復此問題。我試圖在jquery中使用DIV。邏輯非常簡單。在mouseDown上，我得到X & Y，並在mouseMove上減去X & Y以平移div。

但不知怎的，div的移動速度更快，無法理解背後的原因。

$('div').on('mousedown', function(e) { 
    self.panStartX = e.pageX; 
    self.panStartY = e.pageY; 
    self.mouseDown = true; 
}).on('mousemove', function(e) { 
    if (self.mouseDown) { 
     var pageTop = parseInt($(this).css('top'), false) || 0; 
     var pageLeft = parseInt($(this).css('left'), false) || 0; 
     self.panEndX = e.pageX; 
     self.panEndY = e.pageY; 

     if (self.panStartY > self.panEndY) { 
      self.panTop = self.panEndY - self.panStartY; 

      pageTop+= self.panTop; 
      $(this).css({ top: pageTop }); 
     } else { 
      // Down 
      self.panTop = self.panStartY - self.panEndY; 

      pageTop-= self.panTop; 
      if (pageTop > 42) pageTop = 42; 

      $(this).css({ top: pageTop }); 
     } 
    } 
}).on('mouseup', function(e) { 
    self.mouseDown = false; 
}); 

這裏是一個演示：http://jsfiddle.net/hvUVy/

Answer 1

我認爲問題是你如何計算pageTop值。你需要找到pageTop在按下鼠標和加/減的差

$(document).ready(function() { 
    var self = {}; 

    $('div').on('mousedown', function(e) { 
     self.panStartX = e.pageX; 
     self.panStartY = e.pageY; 
     self.mouseDown = true; 
     self.pageTop = parseInt($(this).css('top'), false) || 0; 
     self.pageLeft = parseInt($(this).css('left'), false) || 0; 
    }).on('mousemove', function(e) { 
     if (self.mouseDown) { 
      var pageTop = self.pageTop; 
      var pageLeft = self.pageLeft; 
      self.panEndX = e.pageX; 
      self.panEndY = e.pageY; 

      if (self.panStartY > self.panEndY) { 
       self.panTop = self.panEndY - self.panStartY; 

       pageTop+= self.panTop; 

       $(this).css({ top: pageTop }); 
      } else { 
       // Down 
       self.panTop = self.panStartY - self.panEndY; 

       pageTop-= self.panTop; 
       if (pageTop > 42) pageTop = 42; 

       $(this).css({ top: pageTop }); 
      } 
     } 
    }).on('mouseup', function(e) { 
     self.mouseDown = false; 
    }); 
}); 

演示：Fiddle

Answer 2

嘗試更換如果 statment：

 $(this).css({ top: self.panEndY - self.panStartY });    
     /*if (self.panStartY > self.panEndY) { 
      self.panTop = self.panEndY - self.panStartY; 

      pageTop= self.panTop; 
      $(this).css({ top: pageTop }); 
     } else { 
      // Down 
      self.panTop = self.panStartY - self.panEndY; 

      pageTop= self.panTop; 
      if (pageTop > 42) pageTop = 42; 

      $(this).css({ top: pageTop }); 
     }*/