HTML

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" >
  </div>
</div>

CSS

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.

.container{
    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.

.icon{
    position:absolute;
    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.

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

Javascript

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();
    drag1.init({
    id: "icon",
    direction: "xy",
    limit: {x:[100,500],y:[50,300]}
}); 

For vertical drag,

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