Copyright © tutorialspoint.com

Drag 'n' Drop with constraint Option

previous next


Advertisements

Description:

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>

To understand it in better way you can Try it yourself.


previous next

Copyright © tutorialspoint.com