Javascript.RU

 
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 30.05.2009, 17:14
Новичок на форуме
Отправить личное сообщение для De-Luxis Посмотреть профиль Найти все сообщения от De-Luxis
 
Регистрация: 30.05.2009
Сообщений: 8

Вопрос новичка по DIV
Прошу помощи местных гуру
Сам яваскрипт только начал изучать.

Есть блок div с id="test". Блок ограничен 200 px по вертикали и горизонтали. Внутри находится картинка. Как сделать так, что бы при нажатии кнопки мыши, можно было перемещать размещение этой картинки внутри блока? Как на картах гул мэпс получается. Какртинка при этом больше самого блока.
  #2 (permalink)  
Старый 30.05.2009, 17:23
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 09.07.2008
Сообщений: 3,873

HTML:
<div id="test">
     <img src="…" alt="…" />
</div>

CSS:
#test {
position: relative;
overflow:hidden;
width: 200px;
height: 200px;
}
#test img {
position:absolute;
top: …px;
left: …px;
}


По событию mousedown на #test начинаешь процесс, по событию mousemove перемещаешь верхний левый угол изображения на соответствующие координаты, по событию mouseup прекращаешь действия.
  #3 (permalink)  
Старый 30.05.2009, 23:44
egg egg вне форума
Интересующийся
Отправить личное сообщение для egg Посмотреть профиль Найти все сообщения от egg
 
Регистрация: 29.05.2009
Сообщений: 19

я тоже начинающий, сталкивался с подобной задачкой, которую так как хотел не решил, заключалась она в следущем, при нажатии на картинку и удержинии кнопки мыши перетаскивать ее по экрану, при этом возникло две проблемы: при перетаскивании открывалось новое окно с этой картинкой и вторая-mousemove изменяло top-left,но на экране это никак не отображалось; первую решил изменяя returnValue для ondragstart, вторую не смог, может кто объяснит?
  #4 (permalink)  
Старый 31.05.2009, 11:09
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 09.07.2008
Сообщений: 3,873

Сообщение от egg
вторую не смог, может кто объяснит?
Код где?
  #5 (permalink)  
Старый 01.06.2009, 16:30
egg egg вне форума
Интересующийся
Отправить личное сообщение для egg Посмотреть профиль Найти все сообщения от egg
 
Регистрация: 29.05.2009
Сообщений: 19

кода уже нет, поэтому взял то что писали вверху, пока писал понял где ошибся
может кому понадобится
<div id=test>
  <img src="picture.jpg" onmousedown='ob=this;move()'>
</div>
<style>
#test {
position: relative;
overflow:hidden;
width: 200px;
height: 200px;
border:solid red
}
#test img {
position:absolute;
}
</style>
<script>
var ob,flag=false//ссылка на картинку;начинает и прекращает перемещение
var mx,my//координаты мыши отн.в.п.угла картинки
function move(){
//задание обработчиков событий
  ob.offsetParent.onmouseout=function(){flag=false}//выход за границы test
  ob.onmouseup=function(){flag=false}//отпускание кнопки
  ob.ondragstart=function(){return false}//отмена открытия окна
  ob.onmousemove=function(){ 
    if(!flag)return//холостой ход
    ob.style.left=event.clientX-mx//перемещение
    ob.style.top=event.clientY-my
  }
  with(ob.offsetParent){//test-объект по умолчанию
  //т.к.отсчет от<div>(плавающий),а не от угла окна,прибав. эту разность 
  mx=event.offsetX+offsetLeft+clientLeft
  my=event.offsetY+offsetTop+clientTop
  }
  flag=true//разрешить перемещение
}
</script>

буду рад выслушать замечания
  #6 (permalink)  
Старый 02.06.2009, 00:13
Аватар для x-yuri
Отправить личное сообщение для x-yuri Посмотреть профиль Найти все сообщения от x-yuri
 
Регистрация: 27.12.2008
Сообщений: 4,201

можешь еще почитать http://javascript.ru/ui/draganddrop
  #7 (permalink)  
Старый 02.06.2009, 19:34
egg egg вне форума
Интересующийся
Отправить личное сообщение для egg Посмотреть профиль Найти все сообщения от egg
 
Регистрация: 29.05.2009
Сообщений: 19

да, мне еще читать и читать, такое впечатление что мой самоучитель из каменного века
 


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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Отрыть DIV блок при переходе с другой страницы BuTbka Общие вопросы Javascript 7 08.04.2009 21:59
div с overflow-y: scroll; + большой контент + Opera/Firefox bug no. Общие вопросы Javascript 2 24.02.2009 10:20
мааленький вопрос по Regexp:) mirniy Общие вопросы Javascript 1 22.01.2009 19:47
вопрос по ready PaCo jQuery 1 28.12.2008 19:19
вопрос по long poll megaswin AJAX и COMET 2 27.05.2008 08:20