jQuery UI Draggable snapTolerance 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 snapTolerance Option. The snapTolerance option sets the minimum distance where the two Draggable items will be snapped.

Syntax: The snapTolerance takes a numerical and the default value is 20. The option is initialized as follows.

$(".drag").draggable({
    snapTolerance: 10
});

Get the snapTolerance option:

var snapToleranceOpt = $(".drag")
.draggable("option", "snapTolerance");

Set the snapTolerance option:

$(".drag").draggable("option", "snapTolerance", 10);

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: In the following example, we have set the snapTolerance to 10.

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= 
"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> 
    <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 snapTolerance option</h3> 
            <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, 
        snapTolerance: 10 
    }); 
    </script> 
</body> 
  
</html>