Skip to content

Instantly share code, notes, and snippets.

@cjheath

cjheath/draginthebox.html

Created July 14, 2011 08:28
Show Gist options
  • Save cjheath/1082099 to your computer and use it in GitHub Desktop.
Save cjheath/1082099 to your computer and use it in GitHub Desktop.
Download ZIP
Shows how to restrict Raphael's dragging to a specified region, in this case, the canvas
Raw
draginthebox.html
<html>
<head>
<script src="https://github.com/DmitryBaranovskiy/raphael/raw/master/raphael-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
</head>
<body>
<div id="container" style="position:absolute;left:25%;right:25%;top:25%;bottom:25%;background-color:#DDD">
</div>
<script type='text/javascript'>
var container = $('#container');
var paper = Raphael(container[0], '100%', '100%');
var radius = 20,
centerX = container.width()/2,
centerY = container.height()/2;
var circle = paper.circle(centerX, centerY, radius);
circle.attr({fill: "#f00"});
circle.drag(
function(x,y) {
var newX = centerX+x,
newY = centerY+y;
// Constrain to the circle to the canvas
if (newX < radius) newX = radius;
if (newY < radius) newY = radius;
if (newX > container.width()-radius) newX = container.width()-radius;
if (newY > container.height()-radius) newY = container.height()-radius;
circle.attr({cx:newX, cy:newY});
}
);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment