jQuery UI Draggable snap Option

Last Updated : 29 Dec, 2021

jQuery UI Draggable consists of options, methods, and events. The snap is one of the option of Draggable. When the snap option is true for any element, it will stick to the other elements that are draggable. We can also use the snap option to another certain element that means we can choose which element it should stick to or not. The snap option supports both boolean and selector types. We can understand the working of the snap option by looking at some interactive examples.

In this article, we are going to learn that how we can use the jQuery UI Draggable snap option.

Syntax:

$(".selector").draggable({
  snap: true
});

Get the snap option:

var snap = $(".selector").draggable( "option", "snap" );

Set the snap option:

$(".selector").draggable( "option", "snap", true );

CDN Link: First of all, we have to add the jQuery UI scripts that are needed for the project.

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="//code.jquery.com/jquery-1.12.4.js"></script>

Example 1: In this example, there will be four boxes and all of them are draggable and all are set to the snap: true option. When we move any element nearby the other elements, it will stick to them with a magnetic effect.

HTML

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
   
    <link rel="stylesheet"
          href=
"https://code.jquery.com/ui/1.13.0/themes/dark-hive/jquery-ui.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
    </script>
    <script src=
"https://code.jquery.com/ui/1.13.0/jquery-ui.js"
            integrity=
"sha256-xH4q8N0pEzrZMaRmd7gQVcTZiFei+HfRTBPJ1OGXC0k=" 
            crossorigin="anonymous">
    </script>
    <style>
        .box1 {
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: roboto;
            width: 100px;
            height: 100px;
            background: #ccc;
            border-radius: 10px;
        }
        .box2 {
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: roboto;
            width: 100px;
            height: 100px;
            background: #ccc;
            border-radius: 10px;
            margin-top: 50px;
        }
        .box3 {
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: roboto;
            width: 100px;
            height: 100px;
            background: #ccc;
            border-radius: 10px;
            transform: translate(200px, -250px);
        }
        .box4 {
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: roboto;
            width: 100px;
            height: 100px;
            background: #ccc;
            border-radius: 10px;
            margin-top: 50px;
            transform: translate(200px, -250px);
        }
    </style>
</head>
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <h3>jQuery UI Draggable snap option</h3>
    <div class="draggable_box box1">Drag this box.</div>
    <div class="draggable_box box2">Drag this box.</div>
    <div class="draggable_box box3">Drag this box.</div>
    <div class="draggable_box box4">Drag this box.</div>
    <script>
        $(".draggable_box").draggable({
            snap: true,
        });
    </script>
</body>
</html>

Output:

Example 2: In this example, unlike the first one we will use the snap option to a specific element, we will have four boxes two of them are red and two of them are blue, the red box will only stick to the red box and the blue box with blue.

HTML

<!doctype html>
<head>
    <link rel="stylesheet"
          href=
"https://code.jquery.com/ui/1.13.0/themes/dark-hive/jquery-ui.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
    </script>
    <script src=
"https://code.jquery.com/ui/1.13.0/jquery-ui.js"
            integrity=
"sha256-xH4q8N0pEzrZMaRmd7gQVcTZiFei+HfRTBPJ1OGXC0k=" 
            crossorigin="anonymous">
    </script>
    <style>
        .box1 {
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: roboto;
            width: 100px;
            height: 100px;
            background: #ccc;
            border-radius: 10px;
            background-color: red;
        }
        .box2 {
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: roboto;
            width: 100px;
            height: 100px;
            background: #ccc;
            border-radius: 10px;
            margin-top: 50px;
            background-color: blue;
        }
        .box3 {
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: roboto;
            width: 100px;
            height: 100px;
            background: #ccc;
            border-radius: 10px;
            transform: translate(200px, -250px);
            background-color: red;
        }
        .box4 {
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: roboto;
            width: 100px;
            height: 100px;
            background: #ccc;
            border-radius: 10px;
            margin-top: 50px;
            transform: translate(200px, -250px);
            background-color: blue;
        }
    </style>
</head>
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <h3>jQuery UI Draggable snap option</h3>
    <div class="draggable_box box1 red1">Drag this box.</div>
    <div class="draggable_box box2 blue2">Drag this box.</div>
    <div class="draggable_box box3 red3">Drag this box.</div>
    <div class="draggable_box box4 blue4">Drag this box.</div>
    <script>
        $(".red1").draggable({
            snap: ".box3",
        })
        $(".blue2").draggable({
            snap: ".blue4",
        })
    </script>
</body>
</html>

Output:

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

jQuery UI Draggable stack Option

iamgaurav

Improve

Article Tags :

jQuery UI Draggable snap Option

Similar Reads

Thank You!

What kind of Experience do you want to share?