nakajima/gist:10010

## gistfile1.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
  <title>Cropper</title>
  <script src="http://localhost:3000/javascripts/prototype.js" type="text/javascript" charset="utf-8"></script>
  <script src="http://localhost:3000/javascripts/effects.js" type="text/javascript" charset="utf-8"></script>
  <script src="http://localhost:3000/javascripts/dragdrop.js" type="text/javascript" charset="utf-8"></script>
  <style type="text/css" media="screen">
    body {
      text-align: center;
    }

    #cropper {
      width: 380px;
      height: 220px;
      overflow: hidden;
      margin: 2em auto;
    }

    #container {
      width: 1024px;
      height: 768px;
      cursor: move;
    }
  </style>
  <script type="text/javascript" charset="utf-8">
    document.observe('dom:loaded', function() {
      var Croppable = Class.create({
        initialize: function(element) {
          this.element = $(element);
          this.x = 0;
          this.y = 0;
          this.setStartPosition();
          this.setupDraggable();
        },

        setStartPosition: function() {
          var offset = this.element.positionedOffset();
          this.start = {
            x: offset.left,
            y: offset.top
          }
        },

        setupDraggable: function() {
          this.draggable = new Draggable(this.element, {
            starteffect: Prototype.K,
            onDrag: this.updatePosition.bind(this),
            snap: function(x,y,draggable) {
              function constrain(n, lower, upper) {
                if (n > upper) return upper;
                else if (n < lower) return lower;
                else return n;
              }

              var dimensions = { }
              dimensions.element = $(draggable.element).getDimensions();
              dimensions.parent = $(draggable.element.parentNode).getDimensions();
              return[
                constrain(x, dimensions.parent.width - dimensions.element.width, 0),
                constrain(y, dimensions.parent.height - dimensions.element.height, 0)];
            }
          });
        },

        updatePosition: function(draggable, event) {
          var position = this.position();
          $('position-x').update(position.x);
          $('position-y').update(position.y);
        },

        position: function() {
          var offset = this.element.positionedOffset();
          return {
            x: (this.start.x - offset.left),
            y: (this.start.y - offset.top)
          }
        }
      });

      new Croppable('container')
    });
  </script>
</head>
<body>

  <div id="cropper">
    <div id="container" style="background: url(http://www.nature-wallpaper.info/wp-content/uploads/2007/09/beautiful-scenery-desktop-of-japan-1.jpg) no-repeat">
    </div>
  </div>

  Coordinates: x: <span id="position-x">0</span>, y: <span id="position-y">0</span>

</body>
</html>
	<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">

	<html lang="en">
	<head>
	<title>Cropper</title>
	<script src="http://localhost:3000/javascripts/prototype.js" type="text/javascript" charset="utf-8"></script>
	<script src="http://localhost:3000/javascripts/effects.js" type="text/javascript" charset="utf-8"></script>
	<script src="http://localhost:3000/javascripts/dragdrop.js" type="text/javascript" charset="utf-8"></script>
	<style type="text/css" media="screen">
	body {
	text-align: center;
	}

	#cropper {
	width: 380px;
	height: 220px;
	overflow: hidden;
	margin: 2em auto;
	}

	#container {
	width: 1024px;
	height: 768px;
	cursor: move;
	}
	</style>
	<script type="text/javascript" charset="utf-8">
	document.observe('dom:loaded', function() {
	var Croppable = Class.create({
	initialize: function(element) {
	this.element = $(element);
	this.x = 0;
	this.y = 0;
	this.setStartPosition();
	this.setupDraggable();
	},

	setStartPosition: function() {
	var offset = this.element.positionedOffset();
	this.start = {
	x: offset.left,
	y: offset.top
	}
	},

	setupDraggable: function() {
	this.draggable = new Draggable(this.element, {
	starteffect: Prototype.K,
	onDrag: this.updatePosition.bind(this),
	snap: function(x,y,draggable) {
	function constrain(n, lower, upper) {
	if (n > upper) return upper;
	else if (n < lower) return lower;
	else return n;
	}

	var dimensions = { }
	dimensions.element = $(draggable.element).getDimensions();
	dimensions.parent = $(draggable.element.parentNode).getDimensions();
	return[
	constrain(x, dimensions.parent.width - dimensions.element.width, 0),
	constrain(y, dimensions.parent.height - dimensions.element.height, 0)];
	}
	});
	},

	updatePosition: function(draggable, event) {
	var position = this.position();
	$('position-x').update(position.x);
	$('position-y').update(position.y);
	},

	position: function() {
	var offset = this.element.positionedOffset();
	return {
	x: (this.start.x - offset.left),
	y: (this.start.y - offset.top)
	}
	}
	});

	new Croppable('container')
	});
	</script>
	</head>
	<body>

	<div id="cropper">
	<div id="container" style="background: url(http://www.nature-wallpaper.info/wp-content/uploads/2007/09/beautiful-scenery-desktop-of-japan-1.jpg) no-repeat">
	</div>
	</div>

	Coordinates: x: <span id="position-x">0</span>, y: <span id="position-y">0</span>

	</body>
	</html>