drag/pan zoom test

drag-pan-zoom-test.markdown

drag/pan zoom test

stole from here: https://stackoverflow.com/questions/35252249/move-drag-pan-and-zoom-object-image-or-div-in-pure-js

A Pen by drawby on CodePen.

License.

index.html

<style>
html {
  overflow: hidden;
  overscroll-behavior: none;
}
</style>

<div id="container">
  <div ondragstart="return false" id="drag-img"/>
  
  <img id="drag-img3" class="bg" src="https://uploads-ssl.webflow.com/64023dc8fecdef7444e66c71/6414ab1209cd02a5a3cfd341_wwwbg.jpg" />
  
    <img id="drag-img3" class="twoseater"
        src="https://uploads-ssl.webflow.com/64023dc8fecdef7444e66c71/6414aa0d7c7782a8cad325aa_2seater.png"/> 
  
  <img id="drag-img3" class="jabbaroof"
        src="https://uploads-ssl.webflow.com/64023dc8fecdef7444e66c71/6414aa0d9c0d4e76db002c8b_jabbaroof.png"/> 
  
    <img id="drag-img3" class="flycastle"
        src="https://uploads-ssl.webflow.com/64023dc8fecdef7444e66c71/64173f279f12e07192f15dc7_flycastle.png"/> 

  
  <img id="drag-img3" class="comproof"
        src="https://uploads-ssl.webflow.com/64023dc8fecdef7444e66c71/6414bcd3c3b649c2fec7a055_computerroof.png"/> 
  
   <img id="drag-img3" class="lavaroof"
        src="https://uploads-ssl.webflow.com/64023dc8fecdef7444e66c71/6414aa0dd6a896b67b67f714_lavaroof.png"/>
  
     <img id="drag-img3" class="speederbike"
        src="https://uploads-ssl.webflow.com/64023dc8fecdef7444e66c71/6414aa0d80b1c6b795410e03_speederrider.png"/>
  
  <img id="drag-img3" class="ufo"
        src="https://uploads-ssl.webflow.com/64023dc8fecdef7444e66c71/64162b01babae480f7dd8d90_ufo.png"/>
  
     <img id="drag-img3" class="speederangle"
        src="https://uploads-ssl.webflow.com/64023dc8fecdef7444e66c71/6414aa0d9cc623cd40056a29_speeder-facing.png"/>
  
  <img id="drag-img3" class="ladyroof"
        src="https://uploads-ssl.webflow.com/64023dc8fecdef7444e66c71/6414aa0dc6ae446430e01982_ladyroof.png"/>
  
  <img id="drag-img3" class="controlroof"
        src="https://uploads-ssl.webflow.com/64023dc8fecdef7444e66c71/6414aa0d2d4f09b7f90f3db0_controlroom-roof.png"/>
  
    <img id="drag-img3" class="twodoorarch"
        src="https://uploads-ssl.webflow.com/64023dc8fecdef7444e66c71/6414aa0dcb95bca6cf29fb47_2door-arch.png"/> 
  
      <img id="drag-img3" class="templeroof"
        src="https://uploads-ssl.webflow.com/64023dc8fecdef7444e66c71/6414aa0ddf53aa58bc306333_oldtempleroof.png"/> 

   <img id="drag-img2" class="ship"
        src="https://uploads-ssl.webflow.com/64023dc8fecdef7444e66c71/6414b4ea2f1c4d8872da7ec8_shipnew75.png"/>
  
  <img id="drag-img2" class="darkship"
        src="https://uploads-ssl.webflow.com/64023dc8fecdef7444e66c71/6416236a04ae8a9963b4b8c2_darkship.png"/>
  
     <img id="drag-img2" class="balloon"
        src="https://uploads-ssl.webflow.com/64023dc8fecdef7444e66c71/6414aa0d09cd028dc7cfc2e6_balloon.png"/>
  
       <img id="drag-img2" class="transport"
        src="https://uploads-ssl.webflow.com/64023dc8fecdef7444e66c71/6414aa0de8118428b061c052_transportspeeder.png"/>
  
</div>


  
</div><div class="navy">
<input type="button" id="zoomout" class="button" value="Zoom out">
<input type="button" id="zoomin" class="button" value="Zoom in">
</div>

script.js

(function () {
	function hasTouch() {
			return 'ontouchstart' in document.documentElement;
	}
	var img_ele = null,
			event_start = hasTouch() ? 'touchstart' : 'mousedown',
			event_move = hasTouch() ? 'touchmove' : 'mousemove',
			event_end = hasTouch() ? 'touchend' : 'mouseup';
      console.log(event_start + "|" + event_move + "|" + event_end);
	(function () {
		function zoom(zoomincrement) {
			img_ele = document.getElementById('drag-img');
  		var pre_width = img_ele.getBoundingClientRect().width,
    			pre_height = img_ele.getBoundingClientRect().height;
			img_ele.style.width = (pre_width * zoomincrement) + 'px';
  		img_ele.style.height = (pre_height * zoomincrement) + 'px';
  		img_ele = null;
		}
		document.getElementById('zoomout').addEventListener('click', function() {
  		zoom(0.5);
		});
		document.getElementById('zoomin').addEventListener('click', function() {
  		zoom(1.5);
		});	
	}());
	(function () {	
		function start_drag(event) {
			var x_cursor = hasTouch() ? event.changedTouches[0].clientX : event.clientX,
					y_cursor = hasTouch() ? event.changedTouches[0].clientY : event.clientY;
			img_ele = this;			
			x_img_ele = x_cursor - img_ele.offsetLeft;
			y_img_ele = y_cursor - img_ele.offsetTop;
			console.log("start drag");
		}
		function stop_drag() {
  		img_ele = null;
  		console.log("stop drag");
		}
		function while_drag(event) {
			var x_cursor = hasTouch() ? event.changedTouches[0].clientX : event.clientX,
					y_cursor = hasTouch() ? event.changedTouches[0].clientY : event.clientY;
  		if (img_ele !== null) {
    		img_ele.style.left = (x_cursor - x_img_ele) + 'px';
    		img_ele.style.top = (y_cursor - y_img_ele) + 'px';
    		console.log('dragging > img_left:' + img_ele.style.left + ' | img_top: ' + img_ele.style.top);
  		}
		}		
	document.getElementById('drag-img').addEventListener(event_start, start_drag);
	document.getElementById('container').addEventListener(event_move, while_drag);
	document.getElementById('container').addEventListener(event_end, stop_drag);
	}());
}());

style.css

body {
    overflow: hidden;
  background:black;
}

#container {
    height: 1920px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}


#drag-img {
  cursor: move;
  position: relative;
  width: 100%;
  top: 50%;
  transform: translate(-50%, -50%);
  left: 50%;
  
}

#container {
  overflow: hidden;
  background: #B78034;
  hheight: 1000px;
  width: 100%;
 
}

.button {
  width: 200px;
  height: 50px;
}
.navy{position:absolute;
top:5px;
display:none;}

.bg{width:6000px;z-index;1}

.controlroof{
  width:175px;
  z-index:3;
  position:absolute;
top:3050px;
  left:1828px;
  opacity:0.9;
  transition: 0.3s;
}
.controlroof:hover{
  opacity:0;
  top:3000px;
  transition: 0.3s;
}




.templeroof{width:790px;
  z-index:2;
  position:absolute;
top:3248px;
  left:3118px;
    opacity:0.9;
  transition: 0.3s;
}

.templeroof:hover{
  opacity:0;
  top:3100px;
  transition: 0.3s;
}






.twodoorarch{width:405px;
  z-index:2;
  position:absolute;
top:1648px;
  left:2869px;
    opacity:0.9;
  transition: 0.3s;
}

.twodoorarch:hover{
  opacity:0;
  top:1670px;
  transition: 0.3s;
}


.jabbaroof{width:610px;
  z-index:2;
  position:absolute;
top:2535px;
  left:483px;
    opacity:0.9;
  transition: 0.3s;
}
.jabbaroof:hover{
  opacity:0;
  top:2515px;
  transition: 0.3s;
}

.flycastle{width:310px;
  z-index:2;
  position:absolute;
top:2745px;
  left:1103px;
   animation: hovv 3s ease 0s infinite alternate-reverse both;
  transition: 0.3s;
}


.comproof{
  width:241px;
  z-index:3;
  position:absolute;
top:3179px;
  left:1370px;
  opacity:0.9;
  transition: 0.3s;
}
.comproof:hover{opacity:0;
  top:3109px;
transition: 0.3s;}

.ladyroof{
  width:373px;
  z-index:3;
  position:absolute;
top:3169px;
  left:814px;
  opacity:0.9;
  transition: 0.3s;
}
.ladyroof:hover{opacity:0;
  top:3109px;
transition: 0.3s;}


.speederangle{
  width:380px;
  z-index:3;
  position:absolute;
top:3705px;
  left:2800px;
   animation: hovv 1s ease 0s infinite alternate-reverse both;
  transition: 0.3s;

}

.speederangle:hover{
  top:3615px;
  left:2700px;
  transition: 0.3s;
}
.ufo{
  width:85px;
  z-index:4;
  position:absolute;
top:3290px;
  left:2326px;
  transition: 0.3s;
   animation: hovv 2s ease 0s infinite alternate-reverse both;
      transition: 0.3s;
}

.speederbike{
  width:250px;
  z-index:4;
  position:absolute;
top:3490px;
  left:1726px;
  transition: 0.3s;
   animation: hovv 1s ease 0s infinite alternate-reverse both;
      transition: 0.3s;
}
.speederbike:hover{transition: 0.3s;
top:3480px;
transition: 0.3s;}

.lavaroof{
  width:1480px;
  z-index:3;
  position:absolute;
top:3493px;
  left:1426px;
  opacity:0.9;
  transition: 0.3s;
}
.lavaroof:hover{opacity:0;
  top:3445px;
transition: 0.3s;}

.twoseater{width:480px;
  z-index:2;
  position:absolute;
top:1300px;
  left:900px;
  animation: hovv 1s ease 0s infinite alternate-reverse both;
      transition: 0.3s;
}

.twoseater:hover{top:1280px;
  left:900px;
 transition: 0.3s;}
  
.darkship{width:480px;
  z-index:2;
  position:absolute;
  top:3120px;
  left:4000px;
  animation: hovv 1s ease 0s infinite alternate-reverse both;
}

.balloon{width:110px;
  z-index:5;
  position:absolute;
  top:2870px;
  left:2960px;
  animation: hovv 1s ease 0s infinite alternate-reverse both;
}

.transport{width:640px;
  z-index:2;
  position:absolute;
  top:3780px;
  left:3500px;
  animation: hovv 1s ease 0s infinite alternate-reverse both;
    transition: 0.3s;
}


.transport:hover{
 top:3820px;
  left:3450px;
  transition: 0.3s;
}


.ship{width:480px;
  z-index:2;
  position:absolute;
top:2350px;
  left:1500px;
  animation: hovv 1s ease 0s infinite alternate-reverse both;
}

@keyframes hovv {
	0% {
		transform: translateY(0);
	}

	100% {
		transform: translateY(-20px);
	}
}

trying gist