I love using Scriptaculous for its effects and drag/drop. However, I need to have my DIVs be resizable too. To make this happen, I’ve written a class called Resizeable that can be added to a DIV in the same way that Draggable can be.

This code is standalone (it needs Prototype, but not Scriptaculous), and it can be used with Draggable with one note: The Draggable handle cannot be the element that is Resizeable, you must specify a handle element when you create a Draggable to avoid confusion between Draggable and Resizeable.

This doesn’t work very well
...
...
new Draggable(‘foo’); new Resizeable(‘foo’);
...
...

This works nicely:
...
...

new Draggable(‘foo’, {handle: ‘bar’}); new Resizeable(‘foo’);

There aren’t many options for this object, but here they are:

The grab areas can be defined with top, left, bottom, right. Each defaults to 6 pixels. If you set this to 0 (zero), then resize in that direction will be disabled.
...
...

new Resizeable(‘foo’, {top: 0, left:50} );

A callback function can be defined that will be called when the resize is over.
...
...

new Resizeable(‘foo’, {resize: function(el) { alert(‘Done!’); } } );

The minimum height and width of the DIV can be specified as minHeight and minWidth options.

The resizable code in action – view source to see how it works.

The Javascript source file can be downloaded here

Currently, this code doesn’t quite work in IE (the DIV can jiggle around a little), but Firefox 1.0 is working Ok.

出处：http://blog.craz8.com/articles/2005/12/01/make-your-divs-resizeable