JavaScript拖動div滯后

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的位置。
可能這個問題可能需要一些優化，例如緩存值。

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

可以改善

var viewportHeight = viewport.height（）;
current.style.top = Math.min（Math.max（Sy，Math.min（viewportHeight-Sy，0）），viewportHeight-current.offsetHeight）+“ px”;

以下是有關瀏覽器重繪/流的一些不錯的閱讀： http : //www.phpied.com/rendering-repaint-reflowrelayout-restyle/

該鏈接建議：

例如，快速（循環）設置和獲取樣式是一個壞主意，例如：

// 不，不！
el.style.left = el.offsetLeft + 10 +“ px”;

僅僅是因為它喜歡閱讀和書寫簡單。