Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   скрол мышкой картинки внутри слоя (https://javascript.ru/forum/dom-window/11672-skrol-myshkojj-kartinki-vnutri-sloya.html)

snk 06.09.2010 22:48

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

И если ли готовые средства реализации требуемой функции, желательно на jquery

B@rmaley.e><e 06.09.2010 22:57

Зачем Вам onclick для перетаскивания изображения? Тут нужен onmousedown.

monolithed 06.09.2010 23:00

Должно помочь

snk 06.09.2010 23:45

Спасибо, но немного не подходит
А нет ли способа запретить перетаскивание элементов браузером?
С остальным разобрался, вся проблема только в не срабатывание событий
onmousedown и onmouseup

monolithed 07.09.2010 07:54

Если, что-то не получается приведите код, здесь нет телепатов

snk 07.09.2010 16:56

<!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 после отпускания кнопки в момент перетаскивания картинки

monolithed 07.09.2010 17:56

Что по вашему должен выполнять ваш бредовый код? Менять курсор мыши в 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: Учитесь пользоваться поиском и не отнимайте время у других!

snk 07.09.2010 18:22

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


Часовой пояс GMT +3, время: 04:09.