<!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
>