使用下面的函数拖动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' ] }
}
答案 0 :(得分: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”;
仅仅因为它喜欢阅读和写作直截了当。