jQuery UI Draggable snapTolerance Option

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.

Output

👁 jQuery UI Draggable snapTolerance Option

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