Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.09.2010, 22:48
snk snk вне форума
Интересующийся
Отправить личное сообщение для snk Посмотреть профиль Найти все сообщения от snk
 
Регистрация: 18.12.2009
Сообщений: 14

скрол мышкой картинки внутри слоя
Нужно сделать возможность перетаскивания картинки внутри слоя с фиксированной высотой и шириной, картинка больше размеров слоя
Перетаскивание картинки должно начинаться при нажатие на картинку и заканчиваться после отпускания мыши
Первая проблема с которой я столкнулся в FF при нажатие на картинку начинается перетаскивание картинки средствами браузера, и событие onclick не срабатывает, как с этим справиться?

И если ли готовые средства реализации требуемой функции, желательно на jquery
Ответить с цитированием
  #2 (permalink)  
Старый 06.09.2010, 22:57
Аватар для B@rmaley.e><e
⊞ Развернуть
Отправить личное сообщение для B@rmaley.e><e Посмотреть профиль Найти все сообщения от B@rmaley.e><e
 
Регистрация: 11.01.2010
Сообщений: 1,810

Зачем Вам onclick для перетаскивания изображения? Тут нужен onmousedown.
Ответить с цитированием
  #3 (permalink)  
Старый 06.09.2010, 23:00
Особый гость
Посмотреть профиль Найти все сообщения от monolithed
 
Регистрация: 02.04.2010
Сообщений: 4,260

Должно помочь
Ответить с цитированием
  #4 (permalink)  
Старый 06.09.2010, 23:45
snk snk вне форума
Интересующийся
Отправить личное сообщение для snk Посмотреть профиль Найти все сообщения от snk
 
Регистрация: 18.12.2009
Сообщений: 14

Спасибо, но немного не подходит
А нет ли способа запретить перетаскивание элементов браузером?
С остальным разобрался, вся проблема только в не срабатывание событий
onmousedown и onmouseup
Ответить с цитированием
  #5 (permalink)  
Старый 07.09.2010, 07:54
Особый гость
Посмотреть профиль Найти все сообщения от monolithed
 
Регистрация: 02.04.2010
Сообщений: 4,260

Если, что-то не получается приведите код, здесь нет телепатов
Ответить с цитированием
  #6 (permalink)  
Старый 07.09.2010, 16:56
snk snk вне форума
Интересующийся
Отправить личное сообщение для snk Посмотреть профиль Найти все сообщения от snk
 
Регистрация: 18.12.2009
Сообщений: 14

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
   jQuery(function()
   {
      
        $('#pdfPage').mousedown(function(){
           $('#pdfPage').css("cursor","-moz-grabbing")
        })
        $('#pdfPage').mouseup(function(){
            $('#pdfPage').css("cursor","-moz-grab")
        })
    })
  </script>
</head>
    <body>
        <div class="right_col" style="cursor: -moz-grab;">
        
            <img id="pdfPage" src="http://img4-fotki.yandex.net/getx/10000/photoface.250/vladimi-kryukov_254428_L" />
        
        </div>
    </body>
</html>


Проблема в том что в firefox 3.6.8 mousedown обрабатывается нормально, если же сразу после нажатия, не двигая мышку отпустить кнопку, mouseup тоже срабатывает, если же не отпуская кнопку мышь передвинуть, хватается фрагмент картинки, и после отпускания кнопки событие mouseup не срабатывает

Решение было бы какая то возможность обработать событие mouseup после отпускания кнопки в момент перетаскивания картинки
Ответить с цитированием
  #7 (permalink)  
Старый 07.09.2010, 17:56
Особый гость
Посмотреть профиль Найти все сообщения от monolithed
 
Регистрация: 02.04.2010
Сообщений: 4,260

Что по вашему должен выполнять ваш бредовый код? Менять курсор мыши в FireFox?

<script type="text/javascript">
window.onload = function(){
	var elemX=0, elemY=0, drag=0, dragy = document.getElementById('some_id');
	dragy.style.cssText = "cursor:move; position:absolute; left:100px; top:100px";

	dragy.onmousedown = function(event){
		event = event || window.event;
		elemX = event.clientX+document.body.scrollLeft-parseInt(dragy.style.left);
		elemY = event.clientY+document.body.scrollTop-parseInt(dragy.style.top);
		drag = true;
	};

	dragy.ondragstart = function() {
		return false;
	};

	document.onmouseup = function() {
		drag = false;
	};

	document.onmousemove = function(event) {
		event = event || window.event;
		if(drag){
			dragy.style.left=event.clientX+document.body.scrollLeft-elemX;
			dragy.style.top=event.clientY+document.body.scrollTop-elemY;
		}
	};
	};
</script>
<img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" id="some_id" alt="" />


Еслу нужно на jQuery есть jquery.event.drag


PS: Учитесь пользоваться поиском и не отнимайте время у других!

Последний раз редактировалось monolithed, 04.08.2011 в 22:19.
Ответить с цитированием
  #8 (permalink)  
Старый 07.09.2010, 18:22
snk snk вне форума
Интересующийся
Отправить личное сообщение для snk Посмотреть профиль Найти все сообщения от snk
 
Регистрация: 18.12.2009
Сообщений: 14

Мой бредовый код должен был именно менять курсор, специально выкинул из кода все лишнее чтобы проиллюстрировать проблему, которую не мог решить (с событием mouseup)
Спасибо за помощь, вроде бы разобрался
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как изменить размер картинки? Mihail Общие вопросы Javascript 1 25.10.2009 13:42
documen.write внутри слоя <div> baal Общие вопросы Javascript 8 14.08.2008 16:11