Skip to content
Related Articles

Related Articles Drag & Drop constraint Option

Improve Article
Save Article
  • Last Updated : 28 Dec, 2020
Improve Article
Save Article

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


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



<!DOCTYPE html>
  <script type="text/javascript" 
  <script type="text/javascript"
  <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' });
    <h1 style="color: green">
  <strong> Drag &
    Drop constraint Option
    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'.
  <img id="elem1" src="elem1.png">
  <img id="elem2" src="elem2.png">


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!