Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Проблема с MOUSEMOVE при "перетаскивании" сайта (https://javascript.ru/forum/events/10219-problema-s-mousemove-pri-peretaskivanii-sajjta.html)

miller 24.06.2010 01:32

Проблема с MOUSEMOVE при "перетаскивании" сайта
 
Залача: сделать перетаскиваемость сайта как на:
http://www.zhytlobud.com/ru/buildings/kiev/

Вроде всё написал правильно, однако MOUSEMOVE перестаёт работать на стыке блоков (когда мышку быстро увожу в сторону и браузер не успевает зафиксировать её на одном месте при перетаскивании).

Получается, что курсор пересекает область одного блока с другим. Тут MOUSEMOVE перестаёт работать и сайт дальше не перетаскивается. Такая же шняга и в остальных браузерах. В Google Chrome и Опере вообще может затормозить и потом некоторое время не сдвинешь сайт.

Всё это очень странно, поскольку события назначаю на "window":
// HandMove
	var is_can_move = true;
	var is_md = false;
	var site_left = 0;
	var site_top = 0;
	var site_width = 2855;
	var site_height = 2572;
	var mouse_x = 0;
	var mouse_y = 0;
	var holder = $("#site");
	
	var filterTop = function(top){
		var limit_value = (-1)*site_height + $("body").height();
		if (top>0) top = 0;
		if (top<limit_value) top = limit_value;
		return top;
	}
	var filterLeft = function(left){
		var limit_value = (-1)*site_width + $("body").width();
		if (left>0) left = 0;
		if (left<limit_value) left = limit_value;
		return left;
	}
	
	$(".no_move_here").mouseenter(function(){ is_can_move = false; console.log(1); }).mouseleave(function(){ is_can_move = true; })
	
	$(window).mousedown(function(event){
		if (is_can_move) {
			is_md = true;
			
			site_left = parseInt(holder.get(0).offsetLeft);
			site_top = parseInt(holder.get(0).offsetTop);
			
			mouse_x = event.pageX;
			mouse_y = event.pageY;
			
			document.ondragstart = function() { return false  }
			document.body.onselectstart = function() { return false }
		}
	});
	
	$(window).mouseup(function(){
		is_md = false;
	});
	$(window).mousemove(function(event) { 
		if (is_md) {
			var new_mouse_x = event.pageX;
			var new_mouse_y = event.pageY;
			var mouse_x_delta = mouse_x - new_mouse_x;
			var mouse_y_delta = mouse_y - new_mouse_y;
			
			holder.get(0).style.left = filterLeft(site_left-mouse_x_delta) + 'px';
			holder.get(0).style.top = filterTop(site_top-mouse_y_delta) + 'px';
			
			mouse_x = new_mouse_x;
			mouse_y = new_mouse_y;
			
			site_left = parseInt(holder.get(0).offsetLeft);
			site_top = parseInt(holder.get(0).offsetTop);
		}
	});
	$(window).resize(function(){
		holder.css("left",(filterLeft(holder.get(0).offsetLeft))+"px");
		holder.css("top",(filterTop(holder.get(0).offsetTop))+"px");
	});
	$(window).mouseleave(function(){ is_md = false; });

Почитал в инете про "captureEvents", служит вроде как для передачи события другому элементу, может ли это мне помочь?
И в чём проблема с несрабатываеним MOUSEMOVE?

miller 25.06.2010 16:50

Может хотя бы предположения есть у кого?

miller 25.06.2010 20:33

Попробовал отключить проверку в событии mousemove на наличие флага is_md, который назначается в том случае, если у нас происходит нажатие на кнопку мыши - mousemove заработал как надо!

Как сделать так, чтобы mouseup действовал на всей области окна браузера, а не до первого пересечения с границей блоков?

miller 25.06.2010 20:34

поправка - mousedown - он должен действовать на всей площади окна.


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