jQuery Resizable and Draggable Tutorial with Example
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)

View Comments

  • 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!

  • 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 4x4 square div may become a 4:1 rectangular.

  • 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?

  • 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!

  • 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()

Leave a Comment
Share
Published by
Viral Patel
Tags: How-To JQuery jquery drag drop jquery resize jquery resizeable
14 years ago

Recent Posts

  • Java

Java URL Encoder/Decoder Example

Java URL Encoder/Decoder Example - In this tutorial we will see how to URL encode/decode…

4 years ago
  • General

How to Show Multiple Examples in OpenAPI Spec

Show Multiple Examples in OpenAPI - OpenAPI (aka Swagger) Specifications has become a defecto standard…

4 years ago
  • General

How to Run Local WordPress using Docker

Local WordPress using Docker - Running a local WordPress development environment is crucial for testing…

4 years ago
  • Java

Create and Validate JWT Token in Java using JJWT

1. JWT Token Overview JSON Web Token (JWT) is an open standard defines a compact…

4 years ago
  • Spring Boot

Spring Boot GraphQL Subscription Realtime API

GraphQL Subscription provides a great way of building real-time API. In this tutorial we will…

4 years ago
  • Spring Boot

Spring Boot DynamoDB Integration Test using Testcontainers

1. Overview Spring Boot Webflux DynamoDB Integration tests - In this tutorial we will see…

4 years ago