如何使用纯 JavaScript 创建可调整大小的 HTML 元素？

使用纯 JavaScript 创建可调整大小的 HTML 元素

存在许多库来启用元素调整大小，但对于那些寻求纯 JavaScript 解决方案的人来说，以下内容可以利用的步骤：

1. 活动侦听器： 将单击事件侦听器附加到所需的 HTML 元素。这将启动调整大小过程。
2. 添加类：向元素添加 CSS 类，例如“可调整大小”，以直观地表明它已进入调整大小模式。
3. Resizer 元素创建： 创建一个新的 HTML 元素，例如
   ，并赋予它“调整大小”类。此元素将用作拖动手柄。
4. Resizer 的事件监听器： 将 mousedown 事件监听器添加到 resizer，这将触发拖动过程的开始。
5. 拖动启动：存储初始鼠标位置、元素尺寸并调整元素大小元素。
6. 拖动功能：向文档添加 mousemove 事件监听器，以在鼠标移动时更新元素的尺寸。
7. 拖动终止： 在 mouseup 上，移除 mousemove 和 mouseup 事件监听器，完成调整大小

以下是实现此方法的示例代码片段：

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);
}

请记住，此方法可能不兼容所有浏览器以及以下版本的 Internet Explorer已知 9 存在问题。