Перетаскивание рисунков

[Drakonee]

Подскажите ответ на такой вопрос:

есть скрипт для перетаскивания рисунков, вопрос такой - как сделать, например, всплывающее окно типа "правильно", если рисунки перетасканы правильно в определенных последовательностях. например есть рисунки стенка, крыша, труба. надо перетащить их так чтобы дверь находилась на стенке, крыша касалась верхней грани стенки, а труба касалась крыши. как это сделать? причем желательно чтобы сам домик не зависел от конкретной точки экрана, а только взаимное расположение рисунков играло роль.
если можно, пример из простейших деталей, например, два кубика соприкасаются гранями)

изначальный скрипт, позволяющий перетаскивать рисунки в любом порядке:

1. Создаём файлы таблицы стилей drag.css:

.drag{
position:relative;
cursor:hand;
z-index: 100;
}

подгружаем:

<link rel="stylesheet" href="ПУТЬ К ФАЙЛУ/drag.css" type="text/css" />

2. Сам скрипт drag.js написанный на языке javascript:

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.t argetobj.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.clie ntX-this.x+"px"
this.targetobj.style.top=this.offsety+evtobj.clien tY-this.y+"px"
return false
}
}

}
dragobject.initialize()

подгружаем:

<script language="JavaScript" type="text/javascript" src="ПУТЬ К ФАЙЛУ/drag.js"></script>

3. Вставляем файлы с изображениями в нужное место:

<img src="ПУТЬ К ФАЙЛУ1/1.png" class="drag">
<img src="ПУТЬ К ФАЙЛУ2/2.png" class="drag">
<img src="ПУТЬ К ФАЙЛУ3/3.png" class="drag">

[Skipp]

1. Сделай код читаемым.
2. Используй поиск, были темы с всплывающими окнами.
3. Ты хоть немного js знаешь?

[Drakonee]

Всплывающие окна это понятно, самое гланое момент, когда они должны всплывать, т.е.

if ( взаимное расположение рисунков верно ) { окно всплывает }

js на самом базовам уровне, можно сказать не знаю, так что изучаю по ходу дела

[Drakonee]

Ну видимо нужно проверить координаты каждого объекта, если они соответствуют заданному диапазону значений, то всплывает окно.
Ребят, подскажите как это выглядит на js , вот именно проверка координат, реально надо. Или в каком разделе учебников вообще искать.

[Kolyaj]

http://javascript.ru/ui/offset

[Drakonee]

Kolyaj,
спасибо, почитал и эту и drag'n'drop , возможно, я что-то не понял, но такой вопрос - как отслеживать координаты именно каждого рисунка вне зависимости от экрана. когда их взаимное расположение верно, всплывает окно.

[Drakonee]

Да, действительно не понял.

function getOffsetRect(elem) {  
    // (1)  
    var box = elem.getBoundingClientRect()         

    // (2)  

    var body = document.body  
    var docElem = document.documentElement  

         // (3)  
    var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop  
    var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft  

    // (4)  
    var clientTop = docElem.clientTop || body.clientTop || 0  
    var clientLeft = docElem.clientLeft || body.clientLeft || 0  

           // (5)  
    var top  = box.top +  scrollTop - clientTop  
    var left = box.left + scrollLeft - clientLeft  

    return { top: Math.round(top), left: Math.round(left) }  
}

кто-нибудь может подсказать, как сделать, чтобы этим самым elem был отслеживаемый рисунок?

[Skipp]

document.getElementById(id);
document.getElementsByTagName('img');



Глянь

[Drakonee]

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>

что я не так делаю?
хотя подозреваю, что вообще все это неверно и что я не знаю нифига

[Drakonee]

function proverka() {  


var x = document.getElementsByTagName('img')[0];
var y = document.getElementsByTagName('img')[1];

if ( getOffsetRect(x) == getOffsetRect(y))    
 { alert("you are right") };
               
}

и так тоже не работает