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

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

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

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

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

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

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

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

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

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

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

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

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 был отслеживаемый рисунок?

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



Глянь

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>

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

function proverka() {  


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

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

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

Skipp,Kolyaj, спасибо

разобрался с этим)

оказывается надо не функции сравнивать getOffsetRect(x) == getOffsetRect(y), а поля или как это называется:

left.getOffsetRect(x) == left. getOffsetRect(y)


тогда такой вопрос - при перетаскивании наверху находится тот рисунок, который объявлен последним, как сделать, чтобы наверху был тот, который перетаскиваешь.

в разделе drag'n'drop , честно говоря, не понял как это сделано

var x = document.getElementsByTagName('blueobj');

var y = document.getElementsByTagName('orangeobj');

Не правильно получаешь элемент.
В данном случаи надо
var x = document.getElementById('blueobj');
var y = document.getElementById('orangeobj');

Ведь blueobj и orangeobj это же id а не имя тега(img, div, span, body....)

Давай разбирайся, кто тебе поможет кроме себя самого)))