JSFiddle - React, Tailwind, and code Playground

by levchenko_d

HTML

<script src="https://raw.githack.com/LevchenkoD/zoomify/master/zoomify.js"></script>
<script src="https://rawcdn.githack.com/LevchenkoD/infinite-space/aac378138d4bec7be668763542d5480b2a03a6ad/infinite-space.js"></script>
<div class="canvas">
  <span class="scroll-fake-content">
    <div class="content">
      <div id="dragme"></div>
    </div>
  </span>
</div>

CSS

.scroll-fake-content{
  position: relative;
  display: block;
}

.content{
  position: absolute;
}



/* Custom Styles */

body{
  margin: 0;
  padding: 0;
  background: silver;
  overflow: scroll;
  position: relative;
}

.wrapper{
  background: white;
  border: solid 1px black;
/*   width: 80vw;
  height: 70vh;
  margin: 10vh 10vw; */
}

.scroll-fake-content{
  /* width: 400vw;
  height: 400vh; */
}

.content{
/*   width: 80vw;
  height: 70vh; */
  background: lightblue;
}

#dragme {
  
  background: red;
  width: 100px;
  height: 100px;
}

JavaScript

$(function() {
		let zoomState = {scale: 1};
		let zoomzoom = new Zoomify({
        canvas: '.canvas',
        min: 0.5,
        max: 2,
        allowCanvasMove: false,
        onchange: function(e, currentZoom){
            /* console.log(e, currentZoom) */;
            zoomState = currentZoom;
        }
    });
    
    let $dragme = $('#dragme');
    let infiniteSpaceInstance = new InfiniteSpace({
        wrapper: 'body',
        fakeContentSize: {
            width: $(document).width() + 200,
            height: $(document).height() + 200
        },
        contentSize: {
            width: $(document).width() - 100,
            height: $(document).height() - 100
        }
    });

		var containmentW,
        containmentH,
        objW,
        objH;

		function handleStart(e, ui){
        ui.position.left = 0;
        ui.position.top = 0;

        containmentW = $(document).width() * zoomState.scale;
        containmentH = $(document).height() * zoomState.scale;
        objW = $(this).outerWidth() * zoomState.scale;
        objH = $(this).outerHeight() * zoomState.scale;
    }

    function handleDrag(e, ui) {
        var intervalMS = 300;
        throttle(infiniteSpaceInstance.handleDrag([ui.position.left / zoomState.scale, ui.position.top / zoomState.scale], $dragme[0]), intervalMS);
        
        var boundReached = false,

            changeLeft = ui.position.left - ui.originalPosition.left,
            newLeft = ui.originalPosition.left + changeLeft / zoomState.scale,

            changeTop = ui.position.top - ui.originalPosition.top,
            newTop = ui.originalPosition.top + changeTop / zoomState.scale;


        // right bound check
        if(ui.position.left > containmentW - objW) {
          newLeft = (containmentW - objW) / zoomState.scale;
          boundReached = true;
        }

        // left bound check
        if(newLeft < 0) {
          newLeft = 0;
          boundReached = true;
        }

        // bottom bound check
       ...