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>
run this source code Browser View

Drag me...!!

Full Source
<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>
run this source code Browser View
Drag me only within this box
Full Source
<!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>
run this source code Browser View
Drag me only along x-axis.


Drag me only along y-axis.
Full Source
<!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>