ryan5500 · April 30, 2010 08:55
diff --git a/panning.html b/panning.html
 <!DOCTYPE html>
 <html>
 <head>
 <script type="text/javascript" src="jquery.js"></script> 
 <script type="text/javascript" src="jquery.rightClick.js"></script> 
 <script type="text/javascript">
 $(function() {
    $('#content').offset({top: $('#view_window').width() / 2, left: $('#view_window').height() / 2});            

    $('#view_window').click(function(event) {
        var pan = $('#content').offset();
        console.log('pan:' + pan.top + ',' + pan.left);
        console.log('event:' + event.pageX + ',' + event.pageY);
        var new_offset = {left: pan.left - (event.pageX - $('#view_window').width() / 2),
                          top:  pan.top - (event.pageY - $('#view_window').height() / 2)  };
        $('#content').offset(new_offset);
    });
 });
 </script>
 <style>
    * {
        margin: 0;
        padding: 0;
    }
    #view_window {
        /* for crop viewport */
        position: absolute;
        overflow: hidden;
        width: 300px;
        height: 300px;

        border: 1px solid gray; 
    }

    #content {
        position: absolute;
    }

    .box {
        position: absolute;
        width: 100px;
        height: 100px;
        background-color: red;
    }

    .point {
        width: 1px;
        height: 1px;
        position: absolute;
        background-color: blue;
    }
 </style>
 </head>
 <body>
    <div id="view_window">
        <div id="content">
            <div id="origin" class="point" style="top: 0px; left: 0px;"></div>
            <div id="box" class="box" style="top: 50px; left: 50px;"></div>
        </div>
    </div>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript" src="jquery.rightClick.js"></script>
	<script type="text/javascript">
	$(function() {
	$('#content').offset({top: $('#view_window').width() / 2, left: $('#view_window').height() / 2});

	$('#view_window').click(function(event) {
	var pan = $('#content').offset();
	console.log('pan:' + pan.top + ',' + pan.left);
	console.log('event:' + event.pageX + ',' + event.pageY);
	var new_offset = {left: pan.left - (event.pageX - $('#view_window').width() / 2),
	top: pan.top - (event.pageY - $('#view_window').height() / 2) };
	$('#content').offset(new_offset);
	});
	});
	</script>
	<style>
	* {
	margin: 0;
	padding: 0;
	}
	#view_window {
	/* for crop viewport */
	position: absolute;
	overflow: hidden;
	width: 300px;
	height: 300px;

	border: 1px solid gray;
	}

	#content {
	position: absolute;
	}

	.box {
	position: absolute;
	width: 100px;
	height: 100px;
	background-color: red;
	}

	.point {
	width: 1px;
	height: 1px;
	position: absolute;
	background-color: blue;
	}
	</style>
	</head>
	<body>
	<div id="view_window">
	<div id="content">
	<div id="origin" class="point" style="top: 0px; left: 0px;"></div>
	<div id="box" class="box" style="top: 50px; left: 50px;"></div>
	</div>
	</div>
	</body>
	</html>