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

[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.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()

подгружаем:

<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">

[Хыиуду]

В момент окончания перетаскивания проверяем координаты каждого из объектов. Если все соответствуют нужным значениям (или диапазонам значений) - все хорошо.

[Drakonee]

В момент окончания перетаскивания проверяем координаты каждого из объектов

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

например для того, чтобы два квадрата соприкасались гранями, надо:
1 квадрат имеет координаты х1у1, х2у2, х3у3, х4у4,
2 квадрат - a1b1, a2b2, a3b3, a4b4

когда они соприкасаются,

a1b1 a2b2 x1y1 x2y2



a4b4 a3b3 x4y4 x3y3

должно быть a2=x1-1 , b2=y1 , a3=x4-1 , b3=y4

т.е. видимо if ( вот здесь должна быть проверка) {всплывает окно, что правильно }

[Хыиуду]

Во-первых, для квадрата достаточно двух координат - x1y1 и x2y2. Две другие - x1y2 и x2y1.
Квадраты соприкасаются - имеется в виду, пересекаются?
Ну, например, пересечение можно определить как
test_x1=(a1-x1)(a1-x2);
test_x2=(a2-x1)(a2-x2);
test_y1=(b1-y1)(b1-y2);
test_y2=(b2-y1)(b2-y2);
if (test_x1<0 || test_x2<0) && (test_y1<0 || test_y2<0) - то квадраты пересекаются.
Если поставить вместо <, например, <=, то проверка будет пройдена также, если квадраты соприкасаются сторонами.

[Drakonee]

Во-первых, для квадрата достаточно двух координат

да, точно

ну можно и пересекаются, просто хочу принцип понять, можно даже проще, когда правая грань первого квадрата совпадает с левой гранью второго, т.е. a2=x1 || b2=y1, в принципе любой пример подойдет

только такой вопрос, как связать поле на рисунке с переменной? т.е. установить, что, например, x1y1 находится в углу квадрата?

if (a2=x1 || b2=y1) { alert("верно") } - вот это нужно вставить в тот же скрипт, что перетаскивает рисунки?

[Drakonee]

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) }
}


вот нашел функция для отслеживания координат объекта относительно экрана, если я правильно понял, возвращает расстояние от верхнего и левого краев.

тогда возникает вопрос, как применить эту функцию к каждому рисунку отдельно и запомнить переменные, чтобы потом их сравнить?

[Хыиуду]

Получаем getOffsetRect для image1 и image2.
Соответственно, для image1, например, координаты двух противоположных углов будут (top, left) и (top+image1.height, left+image1.width)