Infinite Drag

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.infinitedrag.js"></script>

<div id="viewport">
	<div id="wall"></div>
</div>

<script type="text/javascript>
	// #wall is the infinite wall.
	// The wall is made of tiles 100px wide and 100px high.
	var infinitedrag = jQuery.infinitedrag("#wall", {}, {
		width: 100,
		height: 100,
		start_col: 0,
		start_row: 0
	});
</script>

// Creates a wall. Each tile is 100px wide and 100px high.
// The tile at (0,0) appears at the top left corner of the viewport.
var wall = jQuery.infinitedrag("#wall");

// Each tile is 300px wide and 200px high.
// The tile at (5, 7) appears at the top left corner of the viewport.
var wall = jQuery.infinitedrag("#wall", {}, {
	width: 300,
	height: 200,
	start_col: 5,
	start_row: 7
});

// The oncreate function is called every time a tile is created.
var wall = jQuery.infinitedrag("#wall", {}, {
	oncreate: function($element, col, row) {
		$element.text(col + " x " + row + " = " + (col * row));
	}
});

var element = wall.draggable();

// Returns whether the wall can be dragged.
var disabled = wall.disabled();

// Disables dragging of the wall.
wall.disabled(true);

// Enables dragging of the wall.
wall.disabled(false);

// Centers the tile at (9, 0) in the viewport.
wall.center(9, 0);

<style type="text/css">
	#demo1_viewport {
		overflow:hidden; /* Occlude elements outside viewport! */
		background-color:#000;
		width:260px;
		height:260px;
		background-color:#ffe3f3;
		border:1px solid #ff94c9;
	}
	#demo1_wall {
		/* Default settings by code:
		 *	position: relative;
		 *	cursor: move;
		 */
	}
		#demo1_wall ._tile {
			/* Default settings by code:
			 * position: absolute,
			 * left: [auto],
			 * top: [auto],
			 * width: [set by constructor],
			 * height: [set by constructor],
			 * overflow: hidden
			 */
			font-size:36px;
			font-weight:bold;
			color:#000;
		}
</style>
<div id="demo1_viewport">
	<div id="demo1_wall"></div>
</div>

<style type="text/css">
	#demo2_viewport {
		overflow:hidden;
		background-color:#000;
		width:260px;
		height:260px;
		color:#fff;
		border:1px solid #ccc;
		background-color:#000;
	}
	#demo2_wall {
	}
		#demo2_wall ._tile {
			font-size:18px;
			font-weight:bold;
		}
			#demo2_wall ._tile:hover {
				background-color:#333;
			}
			#demo2_wall ._tile ._content {
				margin:0;
				padding:10px;
				width:180px;
				height:130px;
				text-align:center;
			}
			#demo2_wall ._tile ._content input {
				width:170px;
				border:1px solid #ff94c9;
			}
</style>
<div id="demo2_viewport">
	<div id="demo2_wall"></div>
</div>
<p>
	Double-click tile to edit.
</p>

<script type="text/javascript">
	$(document).ready(function() {
		var edit = function($element) {
			// Create the text input.
			var text = $element.text();
			$input = $('<input type="text" />').val(text);
			
			// Create the from.
			$editor = $("<form></form>").
				append($input).
				appendTo($element.empty());
				
			// Focus on the input.
			$input.focus();
			
			var save = function () {
				var val = $editor.children("input").val();
				$element.html(val);
				return false;
			}
			
			$input.blur(save);
			$editor.submit(save);
		};
		
		var tile_options = {
			width: 200,
			height: 150,
			start_col: 13,
			start_row: 11,
			oncreate: function($element, col, row) {
				$('<div class="_content"></div>').
					text(col + "," + row).
					appendTo($element).
					dblclick(function(e) {
						edit($(this));
					});
			}
		};
		
		jQuery.infinitedrag("#demo2_wall", {}, tile_options);
	});
</script>				

<style type="text/css">
	#demo3_viewport {
		overflow:hidden;
		background-color:#000;
		width:260px;
		height:260px;
		color:#fff;
		border:1px solid #ccc;
		background-color:#000;
	}
	#demo3_wall {
	}
		#demo3_wall ._tile {
			font-size:18px;
			font-weight:bold;
		}
</style>
<div id="demo3_viewport">
	<div id="demo3_wall"></div>
</div>

<script type="text/javascript">
	$(document).ready(function() {
		jQuery.infinitedrag("#demo3_wall", 
			{ axis: "x" },	// "y" for vertical drag.
			{ 
				height: 260,	// same height as viewport.
				range_col: [0, 100000]
			}	
		);
	});
</script>