Javascript: перемещение по div, как по google maps

288

16 октября 2017, 00:51

Есть div, который намного больше размера окна. Ищу такую библиотеку или способ, чтобы по этому элементу можно было перемещаться как в гугл картах (драгать и масштабировать скроллом). В этом div есть другие элементы

Answer 1

Вас устроит такой вариант?

Element.prototype.makeDraggable=function(){ 
		var o=this 
 
		var prevx =  document.body.firstElementChild.scrollLeft = document.body.firstElementChild.scrollWidth / 4 
		var prevy = document.body.firstElementChild.scrollTop = document.body.firstElementChild.scrollHeight / 4 
 
		o.style.left = o.parentNode.clientWidth / 2 - o.clientWidth / 2 
		o.style.top = o.parentNode.clientHeight / 2 - o.clientHeight / 2 
 
		var scale = 1.0 
 
		var prevent = false 
 
		function onwheel(e) 
		{ 
			var el = e.target.closest(".container") 
			if(!el) return 
			e.preventDefault ? e.preventDefault() : (e.returnValue = false); 
 
			e = e || window.event; 
 
			var c = el.firstElementChild 
 
			var d = e.deltaY || e.detail || e.wheelDelta 
 
			if(prevent || d == 0) return 
 
			scale += (d * 0.001) * scale 
 
			if(scale > 3.0) scale = 3.0 
			else if(scale < 0.1) scale = 0.1 
 
			o.style.transform = "scale(" + scale + ", " + scale + ")" 
		} 
 
		if (window.addEventListener) { 
		  if ('onwheel' in window) { 
		    window.addEventListener("wheel", onwheel); 
		  } else if ('onmousewheel' in window) { 
		    window.addEventListener("mousewheel", onwheel); 
		  } else { 
		    window.addEventListener("MozMousePixelScroll", onwheel); 
		  } 
		} else { 
		  window.attachEvent("onmousewheel", onwheel); 
		} 
 
		o.onmousedown=function(e){ 
 
			prevent = true 
 
			var offsetX=e.pageX-(parseInt(o.style.left) || 0) 
			var offsetY=e.pageY-(parseInt(o.style.top) || 0) 
 
			document.onmousemove=function(e) { 
 
				o.style.left=Math.max(Math.min(e.pageX-offsetX,o.parentNode.clientWidth-100),- o.clientHeight * scale + 100) + 'px' 
				o.style.top=Math.max(Math.min(e.pageY-offsetY,o.parentNode.clientHeight-100),- o.clientWidth * scale + 100) + 'px' 
			} 
			document.onmouseup = function(e) { 
				prevent = false 
				document.onmousemove=o.onmouseup=null 
			} 
		} 
		o.ondragstart = function(){return 0} 
	} 
 
var makeDraggable = function() { 
  document.getElementsByClassName('map')[0].makeDraggable() 
}

* { 
  margin:0; 
  padding:0; 
} 
 
.map { 
  width: 300px; 
  height: 300px; 
  background: gray; 
  position:relative; 
  margin:0; 
  padding:0; 
} 
 
.map * { 
	position:absolute; 
	width: 10px; 
	height: 10px; 
} 
 
.container { 
  background: #EEE; 
  width: 600px; 
  height: 600px; 
  overflow:hidden; 
  margin:0; 
  padding:0; 
}

<body onload="makeDraggable()"> 
	<div class="container"> 
		<div class="map"> 
			<div style="left:10px;top:70px;background:brown;"></div> 
			<div style="left:150px;top:40px;background:blue;"></div> 
			<div style="left:20px;top:30px;background:yellow;"></div> 
			<div style="left:60px;top:20px;background:white;"></div> 
			<div style="left:110px;top:70px;background:white;"></div> 
			<div style="left:250px;top:40px;background:green;"></div> 
			<div style="left:120px;top:30px;background:gray;"></div> 
			<div style="left:160px;top:20px;background:red;"></div> 
			<div style="left:10px;top:170px;background:white;"></div> 
			<div style="left:150px;top:140px;background:yellow;"></div> 
			<div style="left:20px;top:130px;background:white;"></div> 
			<div style="left:60px;top:120px;background:green;"></div> 
			<div style="left:110px;top:170px;background:red;"></div> 
			<div style="left:250px;top:140px;background:white;"></div> 
			<div style="left:120px;top:130px;background:magenta;"></div> 
			<div style="left:160px;top:120px;background:brown;"></div> 
			<div style="left:60px;top:120px;background:green;"></div> 
			<div style="left:110px;top:270px;background:red;"></div> 
			<div style="left:250px;top:240px;background:white;"></div> 
			<div style="left:120px;top:230px;background:magenta;"></div> 
			<div style="left:160px;top:220px;background:brown;"></div> 
		</div> 
	</div> 
	<div></div> 
</body>

ПОСЛЕДНИЕ ВОПРОСЫ

07:09
17:51

Как выбрать ноутбук для школьника
08:01
07:36

Что такое Grid Бот
07:00

Використання UGC контенту для соціальних мереж
21:22

Использование тестового аккаунта Google Analytics
20:00

Почему стоит покупать лицензионное ПО
20:14
07:41

Методы повышения посещаемости веб-сайта

Все вопросы

ТОП-10

Все популярные вопросы

JS - Почему не воспроизводится анимация

По каким-то непонятным причинам Canvas не хочет выполнять анимацию заполнения холста через setTimeout()В браузере получается просто конечный результат,...

308

javascript