Infinite Drag

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/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>