The script.aculo.us library is a cross-browser library that aims at improving the user interface of a website. The Drag & Drop module can be used to make any element drag-gable and also enables them to be dropped in a drop zone.
The constraint option is used to restrict the direction of movement of the draggable item while it is being dragged. It can be set to ‘horizontal’ or ‘vertical’, thereby allowing movement in only that direction.
Syntax:
{ constraint: value }Parameters: This option has a single value as mentioned above and described below:
- value: This is a string value that specifies the constrained direction. It can be either ‘horizontal’ or ‘vertical’. The default value is set to null.
The below example illustrates the use of this option.
Example:
HTML
<!DOCTYPE html> <html>
<head>
<script type="text/javascript" src="prototype.js">
</script>
<script type="text/javascript"
src="scriptaculous.js">
</script>
<script type="text/javascript">
window.onload = function () {
// Draggable element with
// constraint set to 'horizontal'
new Draggable('elem1',
{ constraint: 'horizontal' });
// Draggable element with
// constraint set to 'vertical'
new Draggable('elem2',
{ constraint: 'vertical' });
};
</script>
</head>
<body>
<div>
<h1 style="color: green">
GeeksforGeeks
</h1>
</div>
<strong>
script.aculo.us Drag &
Drop constraint Option
</strong>
<p>
Drag the elements to see the
effect of the constraint option.
Element 1 has the constraint set
to 'horizontal' and Element 2 has
the constraint set to 'vertical'.
</p>
<img id="elem1" src="elem1.png">
<img id="elem2" src="elem2.png">
</body>
</html>
|
Output: