Skip to content
Related Articles

Related Articles

script.aculo.us Sorting constraint Option
  • Last Updated : 17 Dec, 2020

The constraint option in the Sortable module is used to restrict the direction of movement of the elements while they are being dragged. It can either be set to ‘horizontal’ or ‘vertical’, thereby allowing movement in only that direction. Its default value is ‘vertical’.

Syntax:

Sortable.create('list', {constraint: 'horizonatal' | 'vertical' })

The examples below demonstrate this option:

Example 1: In this example, the constraint option is set to ‘horizontal’.

HTML






<!DOCTYPE html>
<html>
  
<head>
    <script type="text/javascript" 
        src="prototype.js">
    </script>
  
    <script type="text/javascript" 
        src="scriptaculous.js">
    </script>
  
    <style>
        li {
            cursor: move;
        }
    </style>
</head>
  
<body>
    <ul id="list">
        <li>tag</li>
        <li>overlap</li>
        <li>constraint</li>
        <li>containment</li>
        <li>handle</li>
    </ul>
      
    <script>
        Sortable.create('list', {
            tag: 'li',
            constraint: 'horizontal'
        });
    </script>
</body>
  
</html>

Output:

Example 2: In this example, the constraint option is set to ‘vertical’.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <script type="text/javascript" 
        src="prototype.js">
    </script>
  
    <script type="text/javascript" 
        src="scriptaculous.js">
    </script>
  
    <style>
        li {
            cursor: move;
        }
    </style>
</head>
  
<body>
    <ul id="list">
        <li>tag</li>
        <li>overlap</li>
        <li>constraint</li>
        <li>containment</li>
        <li>handle</li>
    </ul>
  
    <script>
        Sortable.create('list', {
            tag: 'li',
            constraint: 'vertical'
        });
    </script>
</body>
  
</html>

Output:

My Personal Notes arrow_drop_up
Recommended Articles
Page :