Make <div> resizeable

html drag-and-drop resize
Chris picture Chris · Dec 24, 2008 · Viewed 54.5k times · Source

Is there a way to make a <div> container resizeable with drag'n'drop? So that the user can change the size of it using drag'n'drop?

Any help would really be appreciated!

Answer

Georg Sch&#246;lly picture Georg Schölly · Dec 24, 2008

The best method would be to use CSS3. It supported by at least Webkit and Gecko.

According to the w3c spec:

div.my_class {
    resize:both;
    overflow:auto; /* something other than visible */
}

Webkit and Firefox do not interpret the specs the same way. In Webkit the size is limited to the width and height set. There's another question: How can I use CSS to make an element resizable to a dimension smaller than the initial one? concerning this.

Related questions

drag drop files into standard html file input

These days we can drag & drop files into a special container and upload them with XHR 2. Many at a time. With live progress bars etc. Very cool stuff. Example here. But sometimes we don't want that much coolness. What …

Read More
How do I remove a file from the FileList

I'm building a drag-and-drop-to-upload web application using HTML5, and I'm dropping the files onto a div and of course fetching the dataTransfer object, which gives me the FileList. Now I want to remove some of the files, but I don't …

Read More
Is there a good jQuery Drag-and-drop file upload plugin?

Is there a nice tidy jQuery plugin that allows including a single JS script then using a simple snippet to enable a form? Something like this: $j('#MyForm').enableDragDropUploads('.upload-area') With the upload target being the action of …

Read More