Простите, не могу создать тему, поэтому размщаю в этом сообщени, модераторам прошу перенести в новую тему.
Добрый вечер!
После прочтения нескольких статей на этом сайте написал небольшую функцию для создания Drag And Drop блоков. Потестировал на прожорливость памяти и вот к каким резельтатам пришел:
при создании 2000 блоков, съедается памяти
Firefox 5mb - 11mb
Opera -11mb
Chrome -11mb
Можно ли как-то оптимизировать скрипт, чтобы он ел меньше памяти? или совсем не ел.
Функция предполагается использоваться на разных сайтах, чтобы было оптимизированно сразу. А то боюсь проблем в будущем.
Спасибо за участие.
Привожу сразу код, рабочий:
<html>
<body>
<script>
function leftTop (el) {
var left = 0;
var top = 0;
while (el.offsetParent){
left += el.offsetLeft;
top += el.offsetTop;
el = el.offsetParent;
}
left += el.offsetLeft;
top += el.offsetTop;
return {x:left, y:top};
}
function fixEvent (e) {
e = e || window.event;
if (e.pageX == null && e.clientX != null) {
var de = document.documentElement;
var body = document.body;
e.pageX = e.clientX + (de && de.scrollLeft || body && body.scrollLeft || 0) - (de.clientLeft || 0);
e.pageY = e.clientY + (de && de.scrollTop || body && body.scrollTop || 0) - (de.clientTop || 0);
}
if (!e.which && e.button) {
e.which = e.button & 1 ? 1 : (e.button & 2 ? 3 : (e.button & 4 ? 2 : 0));
}
return e;
}
function dd() {
var box;
var mouseOffset;
var posBlock;
var cacheX;
var cacheY;
var zIndex;
box = document.createElement('div');
box.style.width = '100px';
box.style.height = '100px';
box.style.border = '1px solid #000';
box.style.position = 'absolute';
box.onmousedown = function (event) {
zIndex = box.style.zIndex;
box.style.zIndex = 9999;
var e = fixEvent(event);
mouseOffset = (function (el, e){
var docPos = leftTop(el);
return { x:e.pageX - docPos.x, y:e.pageY - docPos.y };
})(box,e);
document.onmousemove = function (e) {
var e = fixEvent(e);
box.style.left = e.pageX - mouseOffset.x + 'px';
box.style.top = e.pageY - mouseOffset.y + 'px';
}
document.ondragstart = function() { return false };
document.body.onselectstart = function() { return false };
return false;
}
box.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null;
document.ondragstart = null;
document.body.onselectstart = null;
box.style.zIndex = zIndex;
box.style.cursor = 'default';
};
document.body.appendChild(box);
}
</script>
<body>
<script type="text/javascript">
for(var i = 0; i < 2000; i += 1){
dd();
}
// FF -5mb -11mb
// Opera -11mb
// Chrome -11mb
</script></body>
</html>