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
Similar Reads
jQuery UI Draggable snapMode 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 goi
2 min read
jQuery UI Draggable scope Option jQuery UIÂ is a web-based technology and consists of GUI widgets, visual effects, and themes implemented using the jQuery, JavaScript Library. jQuery UI is the best tool for building UI interfaces for the webpages. It can also be used to build highly interactive web applications or can be used to ad
2 min read
jQuery UI Draggable stack Option jQuery UI is a web-based technology and consists of GUI widgets, visual effects, and themes implemented using the jQuery, JavaScript Library. jQuery UI is the best tool for building UI interfaces for the webpages. It can also be used to build highly interactive web applications or can be used to add
2 min read
jQuery UI Draggable scroll Option The jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI Draggable scroll Option is used to scroll the container while dragging if it set to true. Syntax: $( ".selector" ).
1 min read
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 goi
2 min read
jQuery UI Draggable grid Option The jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI Draggable grid Option is used to set the dragging helper to a grid, every x, and y pixels. The grid value stored in
1 min read