script.aculo.us Sorting constraint Option

Last Updated : 18 Jan, 2022

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: 'horizontal' | '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>