Skipp,спасибо
document.getElementsById(id); - нужно использовать div'ы , чтобы картинку двигать?
к примеру, здесь должно всплыть окно, если два квадрата наложены строго друг на друга (т.е. координаты совпадают)
var dragobject={
z: 0, x: 0, y: 0, offsetx : null, offsety : null, targetobj : null, dragapproved : 0,
initialize:function(){
document.onmousedown=this.drag
document.onmouseup=function(){this.dragapproved=0}
},
drag:function(e){
var evtobj=window.event? window.event : e
this.targetobj=window.event? event.srcElement : e.target
if (this.targetobj.className=="drag"){
this.dragapproved=1
if (isNaN(parseInt(this.targetobj.style.left))){this.targetobj.style.left=0}
if (isNaN(parseInt(this.targetobj.style.top))){this.targetobj.style.top=0}
this.offsetx=parseInt(this.targetobj.style.left)
this.offsety=parseInt(this.targetobj.style.top)
this.x=evtobj.clientX
this.y=evtobj.clientY
if (evtobj.preventDefault)
evtobj.preventDefault()
document.onmousemove=dragobject.moveit
}
},
moveit:function(e){
var evtobj=window.event? window.event : e
if (this.dragapproved==1){
this.targetobj.style.left=this.offsetx+evtobj.clientX-this.x+"px"
this.targetobj.style.top=this.offsety+evtobj.clientY-this.y+"px"
return false
}
}
}
dragobject.initialize()
//возвращает координаты
function getOffsetRect(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) }
}
//проверяем координаты квадратов
function proverka() {
var x = document.getElementsByTagName('blueobj');
var y = document.getElementsByTagName('orangeobj');
if ( getOffsetRect(x) == getOffsetRect(y))
{ alert("you are right") };
}
<head>
<link rel="stylesheet" href="drag.css" type="text/css" />
<script language="JavaScript" type="text/javascript" src="drag.js"></script>
<body>
<input type="button" onclick="proverka()" value="check"/>
</body>
<div id="blueobj"> <img src="1.jpg" class="drag"> </div>
<div id="orangeobj"> <img src="2.jpg" class="drag"> </div>
</head>
что я не так делаю?
хотя подозреваю, что вообще все это неверно и что я не знаю нифига