jQuery Resizable and Draggable Tutorial with Example

By Viral Patel on January 25, 2010

Have you ever tried doing some animation using plain Javascript or moving DIVs here and there or resizing them?! Well, you know then how much pain it is as not only you have to tackle the difficult part of animation but also making it cross browser compatible.

Well you probably know why I am stretching up so hard is just to tell you how easy it is to use jQuery and do some really fantastic things without even bothering of knowing how it is done internally. jQuery comes with really useful UI library that can be incorporated to do such tricks.

In this small note, I will show you how to do Resizing and Dragging of a DIV using jQuery UI. I will show you the demo of a DIV, which can be resized by pulling up the edges and also dragged here and there.

Step 1: Setting up jQuery UI and CSS

We need to install jQuery UI library first in order to do resizing/dragging. Add following lines in your HEAD of html document.

<script type="text/javascript" 
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" 
	src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" 
	href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/>

Note that we have imported jquery and jquery-ui library. Also, to use Resizable we must import jquery-ui.css file. This stylesheet will be used by resizable to add resize corner and other internal styles.

Step 2: Write jQuery to Resize and Drag

For the demo we will define a small DIV which we will make resizable and draggable.

<div id="resizeDiv"></div>

Now just add following jQuery code in your document.

$('#resizeDiv')
	.draggable()
	.resizable();

The beauty of jQuery is that we can simply chain the function calling. First we called .draggable() function that makes the DIV draggable and then we called resizable().
You may want to define callback functions on start/stop/resize events. To do so we simply define:

$('#resizeDiv')
	.resizable({
		start: function(e, ui) {
			alert('resizing started');
		},
		resize: function(e, ui) {
		
		},
		stop: function(e, ui) {
			alert('resizing stopped');
		}
	});

Note that the callback function gets two arguments. First is event object and next is ui.
The ui object has the following fields:

ui.helper – a jQuery object containing the helper element
ui.originalPosition – {top, left} before resizing started
ui.originalSize – {width, height} before resizing started
ui.position – {top, left} current position
ui.size – {width, height} current size

For more information about jQuery Draggable (Drag and Drop) read this article.
jQuery Draggable (Drag and Drop)

Online Demo

Following is the online demo of jQuery Resizable and Draggable.

(Demo Link)

Get our Articles via Email. Enter your email address.

29 Comments

Gaurav - PHP/MySql programmer INDIA 25 January, 2010, 17:26

awesome code….

Viral Patel 25 January, 2010, 18:15

Thanks Gaurav…

Can Aydoğan 27 January, 2010, 17:06

Thanks, very useful tutorial.

john 9 March, 2010, 19:08

This is indeed great stuff!

One question: I am trying to add multiple divs on a page that can be dragged, dropped and resized, but it appears that only one div can be activated at a time? I am trying to reactivate a given div on a mouseover, but the resizing doesn’t seem to be kicking back in. Is there some way to un-initialize the non-active divs?

Thanks!

Nan Meng 7 May, 2010, 19:55

There is some bug within jQuery resizable.
If you specify aspectRatio:true and resize the target, the target’s aspect ratio is not well respected. i.e. If you resize the target back and forth quickly for a few times, a 4×4 square div may become a 4:1 rectangular.

thangam 14 July, 2010, 11:44

i have one question…..

we are developing a website. we need to include a non interactive slider in that. how to design a slider using JQuery Javascript?

Tanuj Dave 10 September, 2010, 16:42

this is really awesome tutorial

Pham Tri 2 June, 2011, 13:41
Ya, that’s right

Reply
- pradeep kumar 16 January, 2013, 13:47
  ya, very true.
  
  Reply

Santiago 10 June, 2011, 22:20

This was a great tutorial. I’m using it now at work, for a website I am building for my company.
However, I’ve gotten stuck because the code doesn’t work on Internet Explorer (not even Version 9, which is the most advanced, and supposedly the least crappy version of Explorer).

Does anyone have any idea how I can improve/edit/manage the code or the CSS/HTML so that I can do the same thing in Explorer? Any help is appreciated.
Thanks!

adhe 13 June, 2011, 1:36

cant resizeable

help me

ashein 7 July, 2011, 1:35

Nice and clean solution, I was experiencing problems with constraining both operations to a parent div – apparently I was too intrusive with changing coords in the intermediate divs…

One note: I wasn’t able to access ui.size / ui.sizeOriginal from the stop event of a draggable (used a shared event handler for both drag and resize stop), so I resorted to $(event.target) and its height() / width()

Ali 3 November, 2011, 20:42

When I Resize it, yhe width and Height are resized proportionally but I want to resize freely. How? Please help me.

Susrut Mishra 25 January, 2012, 11:15

Awesome buddy – would like it to be drag-able inside the parent div’s bounds. Will try doing some experiments on this for sure. Thanks

varunmaggo 17 April, 2012, 17:35

thanks jquery guy!

shanu 19 April, 2012, 11:46

Thanks..

Devsign Web Design and Web Development 28 May, 2012, 17:51

Very handy for my latest project!

shamim 2 June, 2012, 13:48

hi this is fine but i want resizable two option:
parent div and children div
i was try this but not work

parent div resizeable and same to child div resizeable

any one can help me please…..

Manoj 27 July, 2012, 13:50

Try to put an image in that div.
Even the image should automatically adjust itself when we re-size the div but its
not working.
Please help me out.

awadhesh verma 30 July, 2012, 19:12

Good one…bt i want to add resize functionality in bottom and right sides of div..
Plz help..
Thnx in advance..

Dave 14 August, 2012, 4:02

Great Tutorial! Thanks!

I found that this isn’t working on IE9, though. Is anyone still actively checking this blog? Have you run into the same issue?

Thanks,

Dave

Srinivas 23 August, 2012, 23:08

Great tutorials, but it is not working in IE9

Alex 16 September, 2012, 21:08

Hey, thank you for the nice example, but what can i do to block dragging if my component reached the begin or the end of the container? thank you

Shankar Raj D 8 October, 2012, 17:20

Its a greate work awsom!!!! its helped me alot… thanks ..

Madhu 8 December, 2012, 13:15

Hai was write the following code but it is not working plz tell me whats the reason. why it is not working.
thanks in advance

<html>
<script src="jqueryall/jquery-1.6.2.js"></script>
<script src="jqueryall/ui/jquery.ui.mouse.js"></script>
<script src="jqueryall/ui/jquery.ui.core.js"></script>
<script src="jqueryall/ui/jquery.ui.widget.js"></script>
<script src="jqueryall/ui/jquery.ui.draggable.js">
</script>
<script>
function fun(){
$("#div").draggable();
}
</script>
<body>
<div id="div" style="height:100;width:100;background-color:blue;"></div>
<button name="click" onclick="fun()">click</button>
</body>
</html>

ChrisN 10 January, 2013, 20:06

Thanks a ton!
Based on your code I could finally get jQuery Resizable to work with the jQuery SVG plugin.
Your truly are my saviour!

Servesh 11 March, 2013, 17:13

It’s very useful script. gr8..

dev 24 April, 2013, 13:04

its not working with image resize and dragging

Ashish 29 April, 2013, 8:59

Hello Viral,

I want to create a div in which I can write text using text box. If text is overflowing then user can resize the div as per his choice. I am not able to resize the div, can you tell me whr is the problem? Below is my code.

 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script&gt;
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script&gt;
<style type="text/css">
#containerBox
{
	height:500px;
	width:500px;
	border:medium solid;	
}
#quoteBox
{
	height:100px;
	width:100px;
	border:medium dotted;
}
</style>

<script>
	$(
		function() 
		{
			$("#quoteBox").resizable();
		}
	);

</script>

</head>

<body>

<div id="containerBox">
	<div id="quoteBox">
    </div>
</div>
</body>

jQuery Resizable and Draggable Tutorial with Example

Step 1: Setting up jQuery UI and CSS

Step 2: Write jQuery to Resize and Drag

Online Demo

29 Comments

Leave a Reply Cancel reply

Subscribe

Sponsors

Links

Categories

Site Pages

jQuery Resizable and Draggable Tutorial with Example

Step 1: Setting up jQuery UI and CSS

Step 2: Write jQuery to Resize and Drag

Online Demo

Related Posts

29 Comments

Leave a Reply Cancel reply

Subscribe

Sponsors

Links

Categories

Site Pages