jQuery UI Draggable
Using jQuery UI, we can make the DOM(Document Object Model) elements made draggable, you can move it by clicking on it with the mouse and drag it anywhere within the viewport.
$( "#draggable" ).draggable();
<div id="draggable" >
<p>Drag this box.....!!</p>
</div>
Browser ViewDrag me...!!
<html>
<head>
<title>jQuery UI draggable example</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function() {
$( "#draggable" ).draggable();
});
</script>
</head>
<body>
<div id="draggable" style="width:20%;padding: 0.5em;border:solid 1px grey">
<p>Drag me...!!</p>
</div>
</body>
</html>
jQuery UI Draggable Containment
The containment property allows you to specify if the element should be contained (ie. should not allow dragging outside of some container)
$("#inside span").draggable ({
containment : "#inside"
});
<div id = "inside">
<span>Drag me only within this box...</span>
</div>
Browser View
Drag me only within this box
<!doctype html>
<html>
<head>
<title>jQuery UI Draggable Containment example</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function() {
$( "#draggable" ).draggable();
$("#inside span").draggable ({
containment : "#inside"
});
});
</script>
</head>
<body>
<div id = "inside" style = "padding: 2em;height:100px;width:25%;border:solid 1px;background-color:red;">
<span style="background-color:white;">Drag me only within this box...</span>
</div>
</body>
</html>
jQuery UI Draggable Axis
The axis property allows you to dragging to either the horizontal (x) or vertical (y) axis. Possible values: "x", "y".
$("#xaxis span").draggable ({
axis : "x"
});
$("#yaxis span").draggable ({
axis : "y"
});
<div id = "xaxis">
<span>Drag me only along x-axis...</span>
</div>
<div id = "yaxis">
<span>Drag me only along y-axis...</span>
</div>
Browser View
Drag me only along x-axis.
Drag me only along y-axis.
<!doctype html>
<html>
<head>
<title>jQuery UI draggable x-axis y-axis example</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function() {
$( "#draggable" ).draggable();
$("#xaxis span").draggable ({
axis : "x"
});
$("#yaxis span").draggable ({
axis : "y"
});
});
</script>
</head>
<body>
<div id = "xaxis" style = "padding: 2em;height:100px;border:solid 1px;background-color:red;">
<span style="background-color:white;">Drag me only along x-axis.</span>
</div>
<br /><br />
<div id = "yaxis" style = "padding: 2em;height:100px;border:solid 1px;background-color:blue;">
<span style="background-color:white;">Drag me only along y-axis.</span>
</div>
</body>
</html>
Related Topics