Форум

snk · #1 (**permalink**) 06.09.2010, 22:48

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

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

B@rmaley.e><e · #2 (**permalink**) 06.09.2010, 22:57

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

monolithed · #3 (**permalink**) 06.09.2010, 23:00

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

snk · #4 (**permalink**) 06.09.2010, 23:45

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

monolithed · #5 (**permalink**) 07.09.2010, 07:54

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

snk · #6 (**permalink**) 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 · #7 (**permalink**) 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 · #8 (**permalink**) 07.09.2010, 18:22

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

Форум

Справочник

Discord чат

Курсы javascript