Updated April 6, 2023
Introduction to jQuery draggable()
jQueryUIdraggable() method allows the DOM elements to be moved using the mouse. This method can be used to drag the DOM elements anywhere within the view port by clicking on the object using mouse and then dragging it to anywhere you want to within the view port. This jQuery interaction method in a way helps build up a powerful web page with great interaction effects. This feature of jqueryUI supports a number of methods like destroy, disable, enable, option, widgetsas well as events like create, drag, drop , start, etc.
Syntax:
There are two forms in which the draggable() method can be used:
$(selector, context).draggable(options)where, options parameter refers to an object which specifies the behavior of DOM elements.
One or more options can be provided by separating them with a comma.
$(selector, context).draggable({option1: value1, option2: value2……})Some of the different options that can be used with this method are:
addClasses, appendTo, cancel, connectTo Sortable, containment, cursor, cursorAt, disabled, etc.
$(selector, context).draggable("action", [params])where, action refers toa jQuery method which is specified as a string in the first argument.
params is optional and can be more than one.
Some of the actions for this method are:
destroy(), disable(), enable(), option(optionName), option(), option(optionName, value), widget()
Examples to Implement jQuery draggable()
Below are the example of jQuery draggable()
Example #1
Let us consider a very simple example to understand the draggable functionality without passing any parameter to the draggable() method.
Code:
<!DOCTYPE html>
<html
<head>
<link
href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel="stylesheet"
/>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
#divstyle {
width: 700px;
height: 300px;
padding-top: 20px;
padding-left: 5px;
text-align: center;
background-color: cadetblue;
}
#drag {
width: 150px;
height: 100px;
background: #eee;
text-align: center;
padding-top: 30px;
}
</style>
<script>
$(function () {
$("#drag").draggable();
});
</script>
</head>
<body>
<div id="divstyle">
<div id="drag">
<p style="font-size: larger; font-weight: bold;">Click here & Drag</p>
</div>
</div>
</body>
</html> Output :Below screenshot is taken of the screen which displays when the above code is executed for the very first time.
The div can be dragged anywhere on the screen using mouse.
Example #2
The following example illustrates the constraint movement of the elements on the screen using a containment option with the draggable() method.
Code:
<!DOCTYPE html>
<html>
<head>
<link
href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel="stylesheet"
/>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
<div id="div1"><span>Draggable anywhere in this div</span><br /><br /></div>
<div id="div2"><span>Draggable only horizontally</span><br /><br /></div>
<style>
#div1 {
width: 500px;
height: 100px;
background-color: cadetblue;
}
#div2 {
width: 500px;
height: 100px;
background-color: grey;
}
</style>
<script>
$("#div1 span").draggable({
containment: "#div1",
});
$("#div2 span").draggable({
axis: "x",
});
</script>
</body>
</html>Output:
Below screen displays when the above code is executed for the very first time.
In the first div,”Div1”, span elements are not allowed to go outside the div but can be moved anywhere within it. This is done using option “containment”.
In the second div, “Div2”, span elements are allowed to be dragged only horizontally. This is done using option axis:”x”.
Example #3
Here is an example which demonstrates the draggable functionality of jQueryUI using actions disable and enable.
Code:
<!DOCTYPE html>
<html>
<head>
<link
href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel="stylesheet"
/>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
#div1 {
width: 500px;
height: 100px;
background-color: cadetblue;
}
#div2 {
width: 500px;
height: 100px;
background-color: grey;
}
</style>
</head>
<body>
<div id="div1">
<p>Dragging is disabled.</p>
<br /><br />
</div>
<div id="div2">
<p>Dragging is enabled.</p>
<br /><br />
</div>
<script>
$("#div1").draggable();
$("#div1").draggable("disable");
$("#div2").draggable();
$("#div2").draggable("enable");
</script>
</body>
</html>Output:
Below screen displays when the above code is executed for the very first time.
From the below picture, you can see that for the first div, dragging is disabled. But for the second div, dragging is enabled, hence it can be dragged anywhere in the screen.
Example #4
The below example uses the option helper with a value clone to move content by duplicating.
Code:
<!DOCTYPE html>
<html>
<head>
<link
href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel="stylesheet"
/>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
#divstyle {
width: 500px;
height: 100px;
background-color: cadetblue;
}
</style>
</head>
<body>
<div id="divstyle">
<p style="font-weight: bold;">Try cloning.</p>
</div>
<script>
$("#divstyle p").draggable({
helper: "clone",
});
</script>
</body>
</html>Output:
This given example is a simple illustration of the moving content of a DOM element by duplicating. Below screen displays when the above code is executed for the very first time.
When the element is tried to be moved, only the duplicated/cloned element moves and the original remains as it is. Once the mouse is released, the cloned element disappears whereas the original element continues to remain at its original position.
Conclusion
- In this article, we learnt about the jQuery UI draggable functionality which basically allows the DOM elements to be moved or dragged using the mouse.
- This is done by clicking on the object to be dragged using mouse and dragging it anywhere within the view port.
- This feature of jQueryUI is helpful in adding interaction animations to the web pages to make them more powerful and interactive.
Recommended Articles
This is a guide to jQuery draggable(). Here we discuss a Brief Overview on jQuery draggable() and its Examples along with its Code Implementation. You can also go through our other suggested articles to learn more –
