Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 21.04.2010, 01:10
Интересующийся
Отправить личное сообщение для Drakonee Посмотреть профиль Найти все сообщения от Drakonee
 
Регистрация: 21.04.2010
Сообщений: 16

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

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

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

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

Последний раз редактировалось Drakonee, 21.04.2010 в 12:03.
Ответить с цитированием
  #2 (permalink)  
Старый 21.04.2010, 09:13
Аватар для Skipp
.
Отправить личное сообщение для Skipp Посмотреть профиль Найти все сообщения от Skipp
 
Регистрация: 30.03.2010
Сообщений: 1,813

1. Сделай код читаемым.
2. Используй поиск, были темы с всплывающими окнами.
3. Ты хоть немного js знаешь?
__________________
.
Ответить с цитированием
  #3 (permalink)  
Старый 21.04.2010, 12:06
Интересующийся
Отправить личное сообщение для Drakonee Посмотреть профиль Найти все сообщения от Drakonee
 
Регистрация: 21.04.2010
Сообщений: 16

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

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

js на самом базовам уровне, можно сказать не знаю, так что изучаю по ходу дела
Ответить с цитированием
  #4 (permalink)  
Старый 22.04.2010, 12:04
Интересующийся
Отправить личное сообщение для Drakonee Посмотреть профиль Найти все сообщения от Drakonee
 
Регистрация: 21.04.2010
Сообщений: 16

Ну видимо нужно проверить координаты каждого объекта, если они соответствуют заданному диапазону значений, то всплывает окно.
Ребят, подскажите как это выглядит на js , вот именно проверка координат, реально надо. Или в каком разделе учебников вообще искать.
Ответить с цитированием
  #5 (permalink)  
Старый 22.04.2010, 17:31
Новичок на форуме
Отправить личное сообщение для Kolyaj Посмотреть профиль Найти все сообщения от Kolyaj
 
Регистрация: 19.02.2008
Сообщений: 9,177

http://javascript.ru/ui/offset
Ответить с цитированием
  #6 (permalink)  
Старый 22.04.2010, 21:51
Интересующийся
Отправить личное сообщение для Drakonee Посмотреть профиль Найти все сообщения от Drakonee
 
Регистрация: 21.04.2010
Сообщений: 16

Kolyaj,
спасибо, почитал и эту и drag'n'drop , возможно, я что-то не понял, но такой вопрос - как отслеживать координаты именно каждого рисунка вне зависимости от экрана. когда их взаимное расположение верно, всплывает окно.
Ответить с цитированием
  #7 (permalink)  
Старый 22.04.2010, 22:42
Интересующийся
Отправить личное сообщение для Drakonee Посмотреть профиль Найти все сообщения от Drakonee
 
Регистрация: 21.04.2010
Сообщений: 16

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

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

Последний раз редактировалось Drakonee, 22.04.2010 в 23:08.
Ответить с цитированием
  #8 (permalink)  
Старый 23.04.2010, 09:11
Аватар для Skipp
.
Отправить личное сообщение для Skipp Посмотреть профиль Найти все сообщения от Skipp
 
Регистрация: 30.03.2010
Сообщений: 1,813

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



Глянь
__________________
.

Последний раз редактировалось Skipp, 23.04.2010 в 09:17.
Ответить с цитированием
  #9 (permalink)  
Старый 23.04.2010, 14:36
Интересующийся
Отправить личное сообщение для Drakonee Посмотреть профиль Найти все сообщения от Drakonee
 
Регистрация: 21.04.2010
Сообщений: 16

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, 23.04.2010 в 14:45.
Ответить с цитированием
  #10 (permalink)  
Старый 23.04.2010, 14:55
Интересующийся
Отправить личное сообщение для Drakonee Посмотреть профиль Найти все сообщения от Drakonee
 
Регистрация: 21.04.2010
Сообщений: 16

function proverka() {  


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

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


и так тоже не работает
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Drag&Drop перетаскивание таблицы magistr_bender Элементы интерфейса 5 15.09.2008 15:33