Drag & 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 the simple syntax to use the constraint option.

new Draggable('element', {constraint:null, "horizontal" or "vertical"});

Example

Live Demo

<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>
</html>

This will produce following result −

scriptaculous_drag_drop.htm