Creating A Drag & Drop Infinite Wall Interface With jQuery

Infinite Drag is a jQuery and jQuery UI plugin that helps you create an infinite wall interface. As you drag the wall in a viewport, previously occluded tiles are created. You can hook onto events to generate custom tiles.

Demo

Download

Basic usage:

Load the jQuery javascript library and jQuery UI on your web page.

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

Include Infinite Drag Plugin on your web page.

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

Create a container with an ID for your infinite wall interface.

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

The javascript.

<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>