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」;

只是因爲它喜歡直接讀寫。