1

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

1
  • Задача понятна, ждите, скоро будет решение. 14 окт 2017 в 11:59

1 ответ 1

2

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

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>

2

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.