Всем привет)
Хочу определить когда объект drag будет перемещён на объект drop, но у меня возникли проблемы с условием.
Сам код:
<html>
<head>
<script>
function getCoords(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) };
}
window.onload = function() {
var dr;
var drag = document.getElementById('drag');
drag.addEventListener('mousedown', function(e) {
dr = true;
e = e || window.event;
var coords = getCoords(drag);
var shiftX = e.pageX - coords.left;
var shiftY = e.pageY - coords.top;
document.addEventListener('mousemove', function(e) {
if(dr) {
e = e || window.event;
drag.style.position = 'absolute';
drag.style.zIndex += 1;
drag.style.left = e.pageX - shiftX + 'px';
drag.style.top = e.pageY - shiftY + 'px';
var drop = document.getElementById('drop');
var dropX = drop.style.left;
var dropY = drop.style.top;
var dropW = drop.style.width;
var dropH = drop.style.height;
var dragX = drag.style.left;
var dragY = drag.style.top;
var dragW = drag.style.width;
var dragH = drag.style.height;
var data = 'dropX: '+dropX+'<br>'+
'dropY: '+dropY+'<br>'+
'dropW: '+dropW+'<br>'+
'dropH: '+dropH+'<br><br>'+
'dragX: '+dragX+'<br>'+
'dragY: '+dragY+'<br>'+
'dragW: '+dragW+'<br>'+
'dragH: '+dragH+'<br>';
if((e.pageX >= dropX) && (e.pageX < (dropX + dropW)) && (e.pageY >= dropY) && (e.pageY <= (dropY + dropH))) {
drop.innerHTML = data + 'Внутри';
} else {
drop.innerHTML = data + 'Снаружи';
}
document.ondragstart = document.body.onselectstart = null;
}
}, false);
}, false);
drag.addEventListener('mouseup', function() {
document.ondragstart = document.body.onselectstart = null;
document.body.style.userSelect = 'text';
dr = false;
}, false);
}
</script>
</head>
<body>
<div id="drag" style="background-color: red; width: 100px; height: 50px;"></div>
<div id="drop" style="background-color: green; width: 200px; height: 200px; left: 150px; top: 100px; position: absolute;"></div>
</body>
</html>
Вот участок кода, в котором, как я думаею, сама проблема:
if((e.pageX >= dropX) && (e.pageX < (dropX + dropW)) && (e.pageY >= dropY) && (e.pageY <= (dropY + dropH)))
Прошу помощи у знающих.