JqueryUI is one of the most popular front-end frameworks currently. It is sleek, intuitive, and powerful mobile-first front-end framework for faster and easier web development. It uses HTML, CSS, and Javascript.
JqueryUI is a powerful Javascript library built on top of jQuery JavaScript library. UI stands for the User interface, It is a set of plug-ins for jQuery that adds new functionalities to the jQuery core library.If you have ever used JavaScript then you must be familiar with the complexity of the codes that one has to go through in order to perform a particular task, due to the evolvement of Jquery library the code become much simpler and now as a designer or as a developer, one has to write few lines of codes in comparison to large number lines of codes of normal Javascript.
The set of plug-ins in JqueryUI includes interface interactions, effects, animations, widgets, and themes built on top of jQuery JavaScript Library.
In this article of mine, I am going to talk about the draggable method of JqueryUI, that provides the functionality of dragging the contents of an HTML page anywhere within the Viewport. This draggable method comes along with a number of attributes that extends the functionality of method and provides more options to a designer or a developer. These attributes include functionalities like dragging the content along a single axis only or dragging the content within a container only etc.
Simple Code Snippet:
<!DOCTYPE html>
<html>
<head>
<!--adding the necessary script files for making our document jquery compliant-->
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
#draggable {
width: 150px;
height: 150px;
padding: 0.5em;
background:red;
color:white;
}
</style>
<script>
$(function() {
//here I am making mydiv draggable by calling the draggable() function
$( "#mydiv" ).draggable();
});
</script>
</head>
<body>
<div id = "mydiv" class = "ui-widget-content">
<p>Drag me !!!</p>
</div>
</body>
</html>
Output:
 |
| This Div can be dragged anywhere within the viewport |
The following attributes are used to limit the movement of elements on the screen.
<!DOCTYPE html>
<html>
<head>
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
<div id = "contdiv" style = "border:solid 1px;background-color:yellow;">
<span>You can drag me only within this div.</span><br /><br />
</div>
<div id = "axisdiv" style = "border:solid 1px;background-color:grey;">
<span>You can drag me only along x axis.</span><br /><br />
</div>
<script>
$("#contdiv span").draggable ({
//here the containment attribute is used that restrict the dragging of content
within the defined div only
containment : "#contdiv"
});
$("#axisdiv span").draggable ({
//here the axis attribute is used that will make the content draggable in a
particular direction only, in our case the direction is x i.e. horizontal, use y for vertical.
axis : "x"
});
</script>
</body>
</html>
Output:
That's it in this article of mine, I hope you guys find it informative. Like the draggable() method, the droppable() method is also there, which allows us to drop the dragged content to some location. JqueryUI contains hell lot of more functionalities make sure to check out them as well as they can really help you in creating an awesome interface.
Read about HTML5 Drag and Drop here.
Nice��
ReplyDelete