Skip to content
Related Articles

Related Articles

Improve Article

script.aculo.us Drag & Drop constraint Option

  • Last Updated : 28 Dec, 2020
Geek Week

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:

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it’s lowest price ever!




My Personal Notes arrow_drop_up
Recommended Articles
Page :