JQuery Resizable And Draggable Tutorial And Example

Have you ever tried to make a div Draggable and Resizabele ?. No matter, It is very simple to make a div or an element Resizable and Draggable using JQuery, you only have to write a two lines of code, but if write it in any other language like javascript or something else you will have to write much code to apply the Draggable and Resizable properties for an element.

You are luck, JQuery UI will give you a perfect solution for what you are searching for. Here is a Simple Tutorial and an example.


Simply go through the below code, and see the given example to know how to use it.

<script type="text/javascript">
$(document).ready(function() {
$("#resizableDiv").resizable();
$("#resizableDiv").draggable();
});
</script>

The above is the code where we set the Resizable and Draggable properties for the elements. From which you can see that the "resizableDiv" is the div for which we applied the two functions.


See an Example

Copy the below code and paste it in your Notepad / Notepad ++ and save it as *.html file.

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>jquery draggable and resizable example</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.8.23/jquery-ui.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.23/themes/base/jquery-ui.css" type="text/css" media="all" />

<style type="text/css">
#resizableDiv { width: 130px; height: 130px; padding: 0.5em;background:#F81;color:white }
</style>

<script type="text/javascript">
$(document).ready(function() {
$("#resizableDiv").resizable();
$("#resizableDiv").draggable();
});
</script>

</head>
<body>
<form id="form1" runat="server">
<div id="resizableDiv">
Move or Resize<br />mobihackman.in</div>
</form>
</body>
</html>

Online Demo


Move or Resize
mobihackman.in

From The Author Desk

I hope you have understand this simple tutorial. If you have any doubt you can ask in below comment box. If you like this you can support us by liking us on Facebook and following on Google +

0 comments:

Post a Comment