This option is used to limit the draggable directions, either horizontal or vertical. Defaults to null which means free movement.
Syntax:
Here is simple syntax to use constraint option.
new Draggable('element',
{constraint:null, "horizontal" or "vertical"});
Example:
<html>
<head>
<title>Draggables Elements</title>
<script type="text/javascript"
src="/javascript/prototype.js"></script>
<script type="text/javascript"
src="/javascript/scriptaculous.js"></script>
<script type="text/javascript">
window.onload = function() {
new Draggable('myimage', {constraint:"horizontal"});
}
</script>
</head>
<body>
<p>Try to drag the following image and see the result and later
change constraint to vertical and then repeat the exercise</p>
<img id="myimage" src="/images/scriptaculous.gif"/>
</body>