Drag to Resize

With the class drag and drop, it's very easy to achieve the effect of drag to resize a div. The div could be dragged in 2 directions - vertically and diagonally. Now let's see how it works.


Besides the div you are going to resize, you need another div for the drag icon. And the icon div is the one that is draggable.

<div class="container" >
  <div id="icon" >


For the div to resize, set the position as relative in order that other parts of the web page could re-postion with the resizing. Set overflow as hidden in order that the contents in the div is hidden rather than displayed outside of the div with the resizing.

    position: relative;
    width: 400px;
    height: 200px;
    background-color: #e2e2e2;
    overflow: hidden;

There's a slight difference between the CSS of icon div for vertical dragging and diagonal dragging.

Diagonally Drag

The position of the icon div is placed at the the right bottom corner of the resizing div.

    width: 16px;
    height: 16px;
    left: 384px;
    top: 184px;
    background-image: url(../images/icon_resize.gif);
    cursor: nw-resize;

Vertically Drag

The position of the icon div is placed above the middle of the bottom border of the resizing div.

   width: 27px;
   height: 5px; 
   left: 185px; 
   top: 194px; 
   background-image: url(../images/resizey.png);
   cursor: n-resize;


To invoke the effect, need 3 parameters to dtermine the id of the drag icon, direction of the drag and the dragging limit.

For diagonal drag,

var drag1 = new drag();
    id: "icon",
    direction: "xy",
    limit: {x:[100,500],y:[50,300]}

For vertical drag,

var drag2 = new drag();
    id: "icon",
    direction: "y",
    limit: {x:[100,500],y:[50,300]}

Last updated on Jul.17, 2010