Open In App

jQuery UI Draggable snap Option

Last Updated : 29 Dec, 2021
Summarize
Comments
Improve
Suggest changes
Share
Like Article
Like
Report

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:

jQuery UI Draggable snap Option

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:

jQuery UI Draggable snap Option

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


Next Article
jQuery UI Draggable snapTolerance Option

I
iamgaurav
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox