JSFiddle - React, Tailwind, and code Playground

by rjurd

HTML

<h1>Position: </h1>

<div id="pan"><div id="wrap"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/e6/Clocktower_Panorama_20080622_20mb.jpg/1280px-Clocktower_Panorama_20080622_20mb.jpg" /></div></div>

CSS

* {
 -moz-user-select: -moz-none;
 -khtml-user-select: none;
 -webkit-user-select: none;
 user-select: none;
 border: 0;
 outline: 0;   
}
h1 {
 text-align: center;
 margin: 20px auto;
}
h2 {
 text-align: center;
 margin: 20px auto;
 font-style: italic;
}
#pan {
 width: 300px;
 height: 116px;
 overflow: hidden;
 margin: 0 auto 0 auto;
 padding: 0;
 border: 1px solid black;
}
#wrap {
 width: 1280px;
 height: 116px;
 overflow: hidden;
 margin: 0 0 0 -600px;
 padding: 0;
 cursor: crosshair;
}

JavaScript

if (window.orientation === undefined) {
    var startX = 0;
    $('#wrap').first().mousedown(function(e) {
        var l = Math.round($('#wrap').first().css('marginLeft').replace('px', ''));
        startX = l - e.pageX;
        $(this).unbind('mousemove');
        $('#wrap').first().mousemove(function(e) {
            var moveX = startX + e.pageX;
            $('h1').html('Position: ' + moveX);
            $('#wrap').first().css('marginLeft', (moveX) + 'px');
            if (Math.round($('#wrap').first().css('marginLeft').replace('px', '')) > 0) { $('#wrap').first().css('marginLeft', '0'); }
            if (Math.round($('#wrap').first().css('marginLeft').replace('px', '')) < $('#pan').width() - $('#wrap').first().width()) { 
                $('#wrap').first().css('marginLeft', $('#pan').width() - $('#wrap').first().width() + 'px'); 
            }
        });
        return false;
    }).mouseup(function() {
        $(this).unbind('mousemove');
        return false;
    });
    $('body').append('<h2>To pan the image, click on the image and drag it to the left or right.</h2>');
}

else {
    var startX = 0;
    $('#wrap').first().bind('touchstart', function(e) {
        e.preventDefault();
        var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
        var l = Math.round($('#wrap').first().css('marginLeft').replace('px', ''));
        startX = l - touch.pageX;
        $(this).unbind('mousemove');
        $('#wrap').first().bind('touchmove', function(e) {
            e.preventDefault();
            var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
            var moveX = startX + touch.pageX;
            $('h1').html('Position: ' + moveX);
            $('#wrap').first().css('marginLeft', (moveX) + 'px');
            if (Math.round($('#wrap').first().css('marginLeft').replace('px', '')) > 0) { $('#wrap').first().css('marginLeft', '0'); }
            if...