Web | This Site

Learn script.aculo.us
script.aculo.us Resources
Selected Reading
© 2011 TutorialsPoint.COM

| Home |  | References |  | Discussion Forums |  | About TP

# Drag 'n' Drop with constraint Option

## 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.

Advertisement

Online Image Processing

Indian Baby Names