Skip to content
Related Articles
Open in App
Not now

Related Articles

jQuery UI Draggable snapMode Option

Improve Article
Save Article
  • Last Updated : 25 Jan, 2022
Improve Article
Save Article

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:

    snapMode: "outer",
  • Get the snapMode option

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

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

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

<link rel=”stylesheet” href=”” />
<script src=””></script>
<script src=””></script>

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


<!DOCTYPE html>
<html lang="en">
    <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" 
    <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;
    <div data-role="page" id="gfgpage">
        <h1 style="color: green;">
        <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" 
                            lightgray">Box 2</div>
            containment: "#gfg_container",
            snap: true,
            snapMode: "inner",
        $("#modeValue").text("Mode: inner");
        function changeMode(mode){
            $(".drag").draggable("option", "snapMode", mode);
            $("#modeValue").text("Mode: "+mode);


jQuery UI Draggable snapMode Option

jQuery UI Draggable snapMode Option


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!