jQuery Resizable and Draggable Tutorial with Example

by · 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"/>

Code language: HTML, XML (xml)
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>

Code language: HTML, XML (xml)
Now just add following jQuery code in your document.
$('#resizeDiv')
	.draggable()
	.resizable();

Code language: JavaScript (javascript)
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');
		}
	});

Code language: JavaScript (javascript)
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.

Tags:

You may also like...

58 Comments

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

    awesome code…. :)

    Reply
  2. Viral Patel says:
    25 January, 2010, 18:15  

    Thanks Gaurav…

    Reply
  3. Can Aydoğan says:
    27 January, 2010, 17:06  

    Thanks, very useful tutorial.

    Reply
  4. john says:
    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!

    Reply
  5. Nan Meng says:
    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.

    Reply
  6. thangam says:
    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?

    Reply
  7. Tanuj Dave says:
    10 September, 2010, 16:42  

    this is really awesome tutorial

    Reply
    • Pham Tri says:
      2 June, 2011, 13:41  

      Ya, that’s right

      Reply
      • pradeep kumar says:
        16 January, 2013, 13:47  

        ya, very true.

        Reply
  8. Santiago says:
    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!

    Reply
  9. adhe says:
    13 June, 2011, 1:36  

    cant resizeable :(

    help me

    Reply
  10. ashein says:
    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()

    Reply
  11. Ali says:
    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.

    Reply
  12. Susrut Mishra says:
    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

    Reply
  13. varunmaggo says:
    17 April, 2012, 17:35  

    thanks jquery guy!

    Reply
  14. shanu says:
    19 April, 2012, 11:46  

    Thanks..

    Reply
  15. Devsign Web Design and Web Development says:
    28 May, 2012, 17:51  

    Very handy for my latest project!

    Reply
  16. shamim says:
    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…..

    Reply
  17. Manoj says:
    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.

    Reply
    • Raneez says:
      2 August, 2015, 14:36  

      put 100% to both width and height….i think it solve your issue

      Reply
  18. awadhesh verma says:
    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..

    Reply
  19. Dave says:
    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

    Reply
  20. Srinivas says:
    23 August, 2012, 23:08  

    Great tutorials, but it is not working in IE9

    Reply
  21. Alex says:
    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

    Reply
  22. Shankar Raj D says:
    8 October, 2012, 17:20  

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

    Reply
  23. Madhu says:
    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>

    Reply
  24. ChrisN says:
    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! :)

    Reply
  25. Servesh says:
    11 March, 2013, 17:13  

    It’s very useful script. gr8..

    Reply
  26. dev says:
    24 April, 2013, 13:04  

    its not working with image resize and dragging

    Reply
  27. Ashish says:
    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>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<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>

    Reply
  28. rani says:
    27 May, 2013, 16:51  

    really helpful..thankss…

    Reply
  29. madhu says:
    15 June, 2013, 14:55  

    Really it is very useful me thanks a lot

    Reply
  30. Vladimir says:
    12 August, 2013, 14:29  

    Thank you a lot! Things works fine for me.

    But here is question – is there possibility to limit area where on page div will be dragged/resized?
    For example:

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


    ?

    Reply
  31. sami says:
    16 September, 2013, 14:27  

    hi viral..

    nice and thanks

    Reply
  32. Amit Gupta says:
    17 September, 2013, 15:06  

    Very Novice.

    Reply
  33. rakesh says:
    4 October, 2013, 16:03  

    how can i drag and drop multipal list item at same time using Ctrl key
    you have any idea

    Reply
  34. Andreas Koppa says:
    25 November, 2013, 2:12  

    According to my dic a tutorial is:
    “… a method of transferring knowledge that may be used as a part of a learning process. More interactive and specific than a book or a lecture; a tutorial seeks to teach by example and supply all the information to complete a certain task.”

    So, this is not a tutorial. It is just a selfishly demonstration on how to use iframes.

    Reply
    • FlexiBecky says:
      28 November, 2013, 4:23  

      Dude, there’s no iframes. Be nice.

      Reply
    • vishal says:
      23 January, 2014, 12:28  

      wen is d last time u visited your doctor??

      Reply
  35. developer says:
    21 January, 2014, 12:35  

    I’m having trouble resizing an element down to say 1px, which seems the absolute minimum. Any others came across this using jQueryUI’s resize function?

    Reply
  36. Vetle Haugen says:
    17 February, 2014, 6:21  

    Hey, great service you’ve created!

    A small question which you might answer:
    Is it possible to keep the resizable feature if you retrieve dynamic data in AJAX?
    (Use a form and change the content dynamically through AJAX / PHP).

    Like this:
    You have a pre-defined content that can both move and resize – “Move Me! … Resize Me! …”
    Can you bring in fresh content so that the box will change to something else (text or images) and still retain both functions.?

    1. Move around
    2. Change dimension / scale???

    I hope you understand me – had to take advantage of Google Translate :-)

    Sincerely
    Vetle Haugen

    Reply
  37. Satya says:
    17 February, 2014, 18:26  

    Hi,

    How to fix draggable() issue inside a scaled down container in jquery

    Reply
  38. Poonam says:
    18 March, 2014, 1:51  

    Hi ,
    How Can I apply resize/drag in my code.
    After clicking the ROI/metric button you can draw image on the canvas by mouse events.
    I want to select an image after drawing and resize it.
    IS it possible with this plugin
    http://jsfiddle.net/AhdJr/58/

    Reply
  39. karthikeyan says:
    9 April, 2014, 20:20  

    hi,

    thanks for the code its really nice one. But when i refresh it go goes to its original format again. But i need some thing like if i move or re-size then it shouldnot go to original format again.. please help me..

    Reply
  40. HZ says:
    23 April, 2014, 15:23  

    Hello, where can I download the source code?

    Reply
  41. hassan says:
    3 February, 2015, 1:10  

    Thank you so much for this example code, it worked great in IE9 when even the official demo had bizarre behavior!

    Reply
  42. adamschodowy says:
    20 February, 2016, 22:31  

    great job, but i can’t get it to work properly with image instead od div – reizing works fine but dragging not, can someone point a solution? except placing an img into div – this dont work too as far as img covers div

    Reply
  43. Arnab says:
    18 April, 2016, 2:16  

    Perfect solution. Thank you so much!!!

    Reply
  44. Pravin K. says:
    19 May, 2016, 16:46  

    Thanks for your awesome tutorial.
    Hi I am currently working on image resize and drag functionality.But not able to apply both properties to this image.We use callback function for this.
    Your input is useful.

    Reply
  45. Sarah Jay says:
    24 October, 2016, 23:30  

    Really helpful article. I solve my problem.Thanks for share that with us.

    Reply
  46. Ricki Heicklen says:
    31 March, 2017, 2:54  

    This is incredible! Quick question —

    I have overflow:scroll on for a div (it has a lot of text and it won’t all fit in the amount of space I want it to), and I’m having difficulty getting the little drag diagonal arrow at the bottom to stick to the bottom of my current window instead of just at the bottom of the top part of the window. How would you recommend I go about getting the bottom-right-corner drag lines to stick there even when I scroll? (The box I’m currently typing in does this!)

    Reply
  47. g3 says:
    18 December, 2017, 20:59  

    i have a problem, i need dragg and resize but only into determinated space, for example if i dragg the div near to botton right corner and i resize, i need stop resize in botton left corner ; a solution for this?

    Reply
  48. g3 says:
    18 December, 2017, 21:00  

    bottom right corner *

    Reply
  49. db says:
    20 March, 2018, 20:55  

    Can this be made to drag and resize a .png image? I’ve been trying and can’t seem to get it right.

    Reply
    • Pohit says:
      9 December, 2020, 15:13  

      Where, I can download this source code.

      Reply
      • Virat says:
        23 June, 2021, 20:51  

        You needs to copy code.

        Reply
  50. Jilli Rose says:
    20 February, 2020, 19:15  

    This is a very good helpful article. I appreciate your effort.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Follow: