Skip to content
Related Articles

Related Articles

script.aculo.us Drag & Drop constraint Option
  • Last Updated : 28 Dec, 2020

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :