Open In App

script.aculo.us Drag & Drop constraint Option

Improve
Improve
Like Article
Like
Save
Share
Report

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:



Last Updated : 28 Dec, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads