Question

I’m basically looking to duplicate the functionality of the draggable resize function of the textareas here on SO.

I know SO uses the jQuery plugin TextAreaResizer to accomplish this, but I want to use straight vanilla javascript so that I can learn how it actually works.

Answer 1

Well, here are the basic steps you will need to take:

1. Remove targeted textarea from the DOM

2. Create a div

3. Put the removed textarea into the newly created div and style it so it always takes all available area of the div

4. Add an element for the drag handle and style it (probably also a div)

5. Attach onmousedown and onmousemove event handlers to the drag handle element and reinstert the wrapper div into the DOM

6. On mousedown event, record the mouse coordinates

7. On mousemove event get the current mouse coordinates and calculate the delta with the previously memorised coordinates

8. Set the wrapper div size to its current size PLUS the deltas that you calculated (when deltas are negative, the size will reduce)

That’s the basic steps you need to take, but there is a bit of detail that you will need to work out.