Open In App

jQuery UI Draggable snapMode Option

Improve
Improve
Like Article
Like
Save
Share
Report

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



Last Updated : 25 Jan, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads