Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

jQuery UI Draggable snapMode Option

  • Last Updated : 25 Jan, 2022

jQuery UI consists of GUI widgets, visual effects, and themes implemented using the jQuery JavaScript Library. jQuery UI is great for building UI interfaces for the webpages. It can be used to build highly interactive web applications or can be used to add widgets easily. 

In this article, we are going to learn the jQuery UI draggable snapMode Option. The snapMode option sets that two draggable items will be snapped to the inner boundary or outer boundary or both.

Syntax: The snapMode option takes a string value and should be one of inner/outer/both. Initialize the syntax as follows:

$(".drag").draggable({
    snapMode: "outer",
});
  • Get the snapMode option

    var snapModeOpt = $(".drag")
    .draggable("option", "snapMode");
  • Set the snapMode option

    $(".drag").draggable("option", "snapMode", 
                         "inner");

CDN Links: Use the following CDNs for the jQuery UI project.

<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css” />
<script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js”></script>

Example: We have made three buttons to swap the snapMode among the inner/outer/both in the following example.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" 
        href=
    <script 
         src=
    </script>
    <script 
         src=
    </script>
    <style type="text/css">
    .drag {
        width: 50px;
        height: 50px;
        line-height: 50px;
        border: 1px solid black;
        cursor: pointer;
        border-radius: 10px;
        text-align: center;
        background-color: lightgreen;
    }
  
    .container {
        background-color: darkgreen;
        width: 200px;
        height: 200px;
        margin: auto;
    }
    </style>
</head>
  
<body>
    <div data-role="page" id="gfgpage">
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <div data-role="main" class="ui-content">
            <h3>jQuery UI Draggable snapMode option</h3>
            <p id="modeValue">Mode: </p>
  
            <button onclick="changeMode('inner')">inner</button>
            <button onclick="changeMode('outer')">outer</button>
            <button onclick="changeMode('both')">both</button>
            <div id="gfg_container" class="container">
                <div class="drag" 
                     style="left:20px;top:20px;">Box 1</div>
                <div class="drag" 
                     style="left:20px;
                            top:30px;
                            background-color:
                            lightgray">Box 2</div>
            </div>
        </div>
    </div>
    <script>
        $(".drag").draggable({
            containment: "#gfg_container",
            snap: true,
            snapMode: "inner",
        });
        $("#modeValue").text("Mode: inner");
        function changeMode(mode){
            $(".drag").draggable("option", "snapMode", mode);
            $("#modeValue").text("Mode: "+mode);
        }
    </script>
</body>
  
</html>

Output:

jQuery UI Draggable snapMode Option

jQuery UI Draggable snapMode Option

Reference: https://api.jqueryui.com/draggable/#option-snapMode


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!