pan div

by David McClelland

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<div id="workspace">
  <div class="workspace-contents">
    <div id="pan-screen" class="grabbable">
      </div>
  </div>
</div>

CSS

.workspace-contents {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 320px;
  height: 240px;
}

#workspace {
  position: relative;
  width: 700px;
  height: 700px;
  overflow: hidden;
}

#pan-screen {
  width: 100%;
  height: 100%;
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  background-color: #112299;
  opacity: 0.2;
  transform-origin: top left;
}
.grabbable {
    cursor: move;
}

.grabbable:active {
    cursor: grabbing;
}

JavaScript

var scale = 1.0;

var drag = {
  elem: null,
  x: 0,
  y: 0,
  state: false
};
var delta = {
  x: 0,
  y: 0
};


$(document).mousedown(function(e) {
  if (!drag.state) {
    let $workspace = $('#workspace');
    let $workspaceContents = $('.workspace_contents');
    $('#pan-screen').css({
      width: $workspaceContents.width,
      height: $workspaceContents.height
    });

    drag.elem = $('.workspace-contents');
    drag.x = e.pageX;
    drag.y = e.pageY;
    drag.state = true;
  }
  return false;
});


$(document).mousemove(function(e) {
  

  if (drag.state) {
    delta.x = e.pageX - drag.x;
    delta.y = e.pageY - drag.y;

    var cur_offset = $(drag.elem).offset();

    $(drag.elem).offset({
      left: (cur_offset.left + delta.x),
      top: (cur_offset.top + delta.y)
    });

    drag.x = e.pageX;
    drag.y = e.pageY;
  }
});

$(document).mouseup(function() {
  if (drag.state) {
    drag.state = false;
  }
});