Пытаюсь создать обёртку для DOM, которая давала бы возможность перетаскивать любой элемент страницы с помощью мыши.
После загрузки страницы, при движении мыши на объекте document в два элемента страницы записываются случайные числа. После того, как вы переместите квадрат и снова будете перемещать мышь по document, то случайные числа уже не записываются в нужные элементы (что-то я с событиями намудрил, видимо), и теперь записываются только во время перетаскивания. В чём может быть проблема?
Ссылка на сам код: http://jsfiddle.net/6H48h/.
<html>
<head>
<script src="fr.js"></script>
<title>trouble</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<script>
function mj(data) {
if (typeof (data) != 'object') {
if (!data) {
data = document.body;
} else {
if (data.substr(0, 1) == '.') {
data = document.getElementsByClassName(data.substr(1, data.length));
} else if (data.substr(0, 1) == '#') {
data = document.getElementById(data.substr(1, data.length));
} else {
data = document;
}
}
}
if (!data.oper) {
data.oper = new Operation(data);
}
return data.oper;
}
function Operation(data) {
this.obj = data;
this.arrLaunch = {
onmousemove: [],
onclick: [],
onmousedown: [],
onmouseup: []
}
return this;
}
//binders
Operation.prototype = {
mousemove: function (func) {
var self = this;
this.arrLaunch['onmousemove'].push(func);
if (!this.obj.onmousemove) this.obj.onmousemove = function (e) {
self.launch('onmousemove');
};
},
click: function (func) {
var self = this;
this.arrLaunch['onclick'].push(func);
if (!this.obj.onclick) this.obj.onclick = function (e) {
self.launch('onclick');
};
},
mousedown: function (func) {
var self = this;
this.arrLaunch['onmousedown'].push(func);
if (!this.obj.onmousedown) this.obj.onmousedown = function (e) {
self.launch('onmousedown');
};
},
mouseup: function (func) {
var self = this;
this.arrLaunch['onmouseup'].push(func);
if (!this.obj.onmouseup) this.obj.onmouseup = function (e) {
self.launch('onmouseup');
};
},
//setters
launch: function (type) {
for (var i = 0; i <= this.arrLaunch[type].length - 1; i++)
this.arrLaunch[type][i]();
},
getCoords: function (elem) {
var box = elem.getBoundingClientRect();
var body = document.body;
var docElem = document.documentElement;
var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop;
var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft;
var clientTop = docElem.clientTop || body.clientTop || 0;
var clientLeft = docElem.clientLeft || body.clientLeft || 0;
var top = box.top + scrollTop - clientTop;
var left = box.left + scrollLeft - clientLeft;
return {
top: Math.round(top),
left: Math.round(left)
};
},
getEvent: function (e) {
return e || window.event;
},
drag: function (data) {
var drag = this.obj;
var self = this;
mj(drag).mousedown(function (e) {
e = mj(drag).getEvent(e);
var coords = mj(drag).getCoords(drag);
var shiftX = e.pageX - coords.left;
var shiftY = e.pageY - coords.top;
mj(document).mousemove(function (e) {
e = mj(drag).getEvent(e);
drag.style.left = e.pageX - shiftX + 'px';
drag.style.top = e.pageY - shiftY + 'px';
drag.style.position = 'absolute';
if (data && data['opacity']) drag.style.opacity = data['opacity'].split(',')[0];
if (data && data['cursor']) drag.style.cursor = data['cursor'].split(',')[0];
});
});
mj(drag).mouseup(function () {
if (data && data['cursor']) drag.style.cursor = data['cursor'].split(',')[1];
if (data && data['opacity']) drag.style.opacity = data['opacity'].split(',')[1];
if (data && data['stop']) data['stop']();
document.onmousemove = document.ondragstart = document.body.onselectstart = null;
});
drag.ondragstart = function () {
return false;
};
}
}
window.onload = function () {
mj(document).mousemove(function () {
q.innerHTML = Math.random();
});
mj(document).mousemove(function () {
w.innerHTML = Math.random();
});
mj('#drag').drag({
opacity: '0.7,1',
cursor: 'move,auto'
});
}
</script>
<body>
<div id="q">0</div>
<div id="w">0</div>
<div id="drag" style="background-color: green; width: 50px; height: 50px;"></div>
</body>
</html>