How to Create Resizable HTML Elements Using Pure JavaScript?

Creating Resizable HTML Elements with Pure JavaScript

Numerous libraries exist to enable element resizing, but for those seeking a pure JavaScript solution, the following steps can be utilized:

1. Event Listener: Attach a click event listener to the desired HTML element. This will initiate the resizing process.
2. Class Addition: Add a CSS class to the element, e.g., "resizable," to visually indicate that it has entered resize mode.
3. Resizer Element Creation: Create a new HTML element, such as a
   , and give it the class "resizer." This element will serve as the drag handle.
4. Event Listeners for Resizer: Add a mousedown event listener to the resizer, which will trigger the start of the dragging process.
5. Drag Initiation: Store the initial mouse position, element dimensions, and resize the element.
6. Drag Function: Add a mousemove event listener to the document to update the element's dimensions as the mouse is moved.
7. Drag Termination: On mouseup, remove the mousemove and mouseup event listeners, completing the resizing process.

Here is a sample code snippet that implements this approach:

var p = document.querySelector('p'); // element to make resizable

p.addEventListener('click', function init() {
    p.removeEventListener('click', init, false);
    p.className = p.className + ' resizable';
    var resizer = document.createElement('div');
    resizer.className = 'resizer';
    p.appendChild(resizer);
    resizer.addEventListener('mousedown', initDrag, false);
}, false);

var startX, startY, startWidth, startHeight;

function initDrag(e) {
   startX = e.clientX;
   startY = e.clientY;
   startWidth = parseInt(document.defaultView.getComputedStyle(p).width, 10);
   startHeight = parseInt(document.defaultView.getComputedStyle(p).height, 10);
   document.documentElement.addEventListener('mousemove', doDrag, false);
   document.documentElement.addEventListener('mouseup', stopDrag, false);
}

function doDrag(e) {
   p.style.width = (startWidth + e.clientX - startX) + 'px';
   p.style.height = (startHeight + e.clientY - startY) + 'px';
}

function stopDrag(e) {
    document.documentElement.removeEventListener('mousemove', doDrag, false);
    document.documentElement.removeEventListener('mouseup', stopDrag, false);
}

Keep in mind that this approach may not be compatible with all browsers, and Internet Explorer below version 9 is specifically known to have issues.