JavaScript dragging div lagging

Question

当使用下面的函数拖动div时出现问题，出于某种原因，当我拖动页面上的div（例如图像和文本块）时，它会滞后。

奇怪的是，这个滞后不是发生在拖曳时由左到右，只有从上到下..

任何想法如何摆脱这个函数的垂直滞后？

function enableDragging(ele) { 
    var dragging = dragging || false, 
     x, y, Ox, Oy, 
     current; 
    enableDragging.z = enableDragging.z || 1; 
    var grabber = document.getElementById("wrapper"); 
    grabber.onmousedown = function (ev) { 
     ev = ev || window.event; 
     var target = ev.target || ev.srcElement; 
     current = target.parentNode; 
     dragging = true; 
     x = ev.clientX + 2; 
     y = ev.clientY + 2; 
     Ox = current.offsetLeft; 
     Oy = current.offsetTop; 
     current.style.zIndex = ++enableDragging.z; 

     document.onmousemove = function (ev) { 
      ev = ev || window.event; 
      if (dragging == true) { 
       var Sx = parseFloat(ev.clientX) - x + Ox; 
       var Sy = parseFloat(ev.clientY) - y + Oy; 
       current.style.left = Math.min(Math.max(Sx, Math.min(viewport().width - Sx, 0)), viewport().width - current.offsetWidth) + "px"; 

       current.style.top = Math.min(Math.max(Sy, Math.min(viewport().height - Sy, 0)), viewport().height - current.offsetHeight) + "px"; 
      } 
     } 

     document.onselectstart = function() { 
      return false; 
     }; 

     document.onmouseup = function (ev) { 
      ev = ev || window.event; 
      dragging && (dragging = false); 
      if (ev.preventDefault) { 
       ev.preventDefault(); 
      } 
     } 

     document.body.style.MozUserSelect = "none"; 
     document.body.style.cursor = "default"; 

     return false; 
    }; 
} 

function viewport() { 
    var e = window 
    , a = 'inner'; 
    if (!('innerWidth' in window)) { 
     a = 'client'; 
     e = document.documentElement || document.body; 
    } 
    return { width : e[ a+'Width' ] , height : e[ a+'Height' ] } 
} 

Answer 1

我已经把小提琴，在这里创建一个演示：http://jsfiddle.net/N6A4q/（请注意我做了修改，以处理var grabber = ele;测试

，我也注意到一个较慢的行为取决于CSS的定位。
也许这个问题可能需要一些像优化缓存值

例如：
ç urrent.style.top = Math.min（Math.max（Sx，Math.min（viewport（）。height - Sx，0）），viewport（）。height - current.offsetWidth）+“px”;

可以与

变种viewportHeight = viewport.height（）得到改善; （Math.max（Sy，Math.min（viewportHeight-Sy，0）），viewportHeight - current.offsetHeight）+“px”;

下面是关于浏览器重绘/流了一些良好的阅读：http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/

链接建议是：

例如，这是一个坏主意来设置，并在快速 连续获得样式（在一个循环中），如：

// no-no！
el.style.left = el.offsetLeft + 10 +“px”;

只是因为它喜欢直接读写。