What is the usage of Draggable, Droppable, Resizable, Selectable in jQuery UI ?
Last Updated :
23 Mar, 2022
In this article, we will see the Draggable, Droppable, Resizable, and Selectable widgets in detail with their usages.
jQuery UI Draggable: The jQuery UI Draggable widget is used to perform drag operation. This widget allows elements to be moved by using the mouse. There are lots of options, methods and events are available in this widget.
Example: In this example, we will use Draggable opacity Option to change the opacity of div element while dragging.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href=
"//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" />
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
h1 {
color: green;
}
#div_element {
width: 150px;
height: 150px;
background: green;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>jQuery UI Draggable opacity Option</h3>
<div id="div_element">Div content</div>
<script>
$(function () {
$("#div_element").draggable({
opacity: 0.4,
});
});
</script>
</body>
</html>
|
Output:
jQuery UI Droppable: The jQuery UI Droppable widget is used to perform the drop operation. This widget creates targets for draggable elements. There are lots of options, methods and events are available in this widget.
Example: In this example, we will use Droppable accept Option to control the draggable elements that are accepted by the droppable widget.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href=
"//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" />
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
h1 {
color: green;
}
div {
color: white;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
#div2 {
width: 150px;
height: 150px;
background: blue;
}
#div1 {
position: absolute;
left: 250px;
width: 200px;
height: 200px;
background: green;
color: #fff;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>jQuery UI Droppable accept Option</h3>
<div id="div1">Drop here</div>
<div id="div2">Drag me</div>
<script>
$("#div2").draggable();
$("#div1").droppable({
accept: "#div1",
});
</script>
</body>
</html>
|
Output:
jQuery UI Resizable: The jQuery UI Resizable widget is used to perform sizing operation. This widget changes the size of an element using the mouse. There are lots of options, methods and events are available in this widget.
Example: In this example, we will use Resizable animate Option to animate and resize the box into the final size after resizing.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href=
"//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" />
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
h1 {
color: green;
}
#first_div {
width: 150px;
height: 150px;
background: green;
margin: 20px;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>jQuery UI Resizable animate Option</h3>
<div id="first_div">First Div</div>
<script>
$(function () {
$("#first_div").resizable({
animate: true,
});
});
</script>
</body>
</html>
|
Output:
jQuery UI Selectable: The jQuery UI Selectable widget is used to perform selecting events. This widget uses the mouse to select elements individually or in a group. There are lots of options, methods and events are available in this widget.
Example: In this example, we will use Selectable cancel Option to prevent selecting from starting on the matching elements.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href=
"//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" />
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
h1 {
color: green;
}
#list .ui-selecting {
background: greenyellow;
}
#list .ui-selected {
background: green;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>jQuery UI Selectable cancel Option</h3>
<ul id="list">
<li>Data Structure</li>
<li>Algorithm</li>
<li>C++</li>
<li>Java</li>
<li id="GFG1">HTML</li>
<li id="GFG2">Bootstrap</li>
<li>PHP</li>
</ul>
<script>
$("#list").selectable({
cancel: "#GFG1, #GFG2",
});
</script>
</body>
</html>
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...