CSS resize属性与自定义拖拽调整大小组件 - 智猿学院-IT界的百科全书

CSS resize 属性：你以为的“调整大小”和它背后的故事

各位看官，咱们今天聊点前端的小八卦，哦不，是小技术。话说这网页开发啊，就像搭积木，CSS 就是那些花花绿绿的积木块，负责给你的网页穿上漂亮的衣服。今天咱们要说的这位“resize”属性，就有点意思了，它能让你的积木块，嗯，我是说网页元素，变得“可伸缩”。

你可能见过这样的场景：一个文本框，右下角有个小三角，鼠标放上去就能拖拽调整大小。没错，这就是 resize 属性的功劳。但是，resize 属性可不仅仅是“拖拽调整大小”这么简单，它背后还藏着一些你可能不知道的小秘密。

resize：我是谁？我在哪？我能干什么？

首先，咱们来认识一下 resize 属性。它的作用很简单，就是控制一个元素是否允许用户调整大小。它有几个可选的值：

none： 默认值，禁止用户调整元素大小。任你鼠标上下翻飞，它自岿然不动。
both： 允许用户在水平和垂直方向上调整元素大小。就是说，你可以随意拉伸它的宽度和高度。
horizontal： 允许用户在水平方向上调整元素大小。只能左右拉伸，上下是没戏的。
vertical： 允许用户在垂直方向上调整元素大小。只能上下拉伸，左右就别想了。
block： 允许用户在块级方向上调整元素大小。这玩意儿稍微有点抽象，涉及到书写模式和文档流。简单来说，如果你的书写模式是横向的（比如我们常用的），那它就等同于 vertical；如果是纵向的，那就等同于 horizontal。
inline： 允许用户在内联方向上调整元素大小。跟 block 类似，也是根据书写模式来决定是水平还是垂直方向。
inherit： 从父元素继承 resize 属性。老爹能伸缩，儿子也能跟着伸缩。
initial： 将 resize 属性设置为其初始值（none）。让元素回到最初的“不可伸缩”状态。
unset： 如果父元素设置了 resize 属性，就继承父元素的；否则，就设置为初始值（none）。这就像一个墙头草，随风倒。

用起来很简单，但是…

resize 属性用起来确实很简单，只需要在 CSS 里加上一句 resize: both; 就能让元素变得可伸缩。但是，事情往往没有那么简单。

问题一：并非所有元素都能“伸缩”

你可能会发现，有些元素设置了 resize 属性，却依然纹丝不动。这是因为，resize 属性只对 overflow 属性值不是 visible 的元素有效。也就是说，如果你的元素内容超出边界，并且 overflow 属性设置为 hidden、scroll 或 auto，才能看到 resize 的效果。

你可以这么理解：resize 属性就像一个“伸缩杆”，只有当元素的内容能够“溢出”时，这个伸缩杆才能发挥作用。如果元素的内容本来就乖乖地待在里面，没有溢出，那伸缩杆也就无用武之地了。

问题二：丑陋的默认样式

当你设置了 resize 属性后，浏览器会自动在元素的右下角添加一个小的拖拽指示器，通常是一个小三角。这个小三角呢，长得实在是…一言难尽。它不仅样式丑陋，而且位置也可能不太符合你的设计要求。

问题三：兼容性问题

虽然现在主流浏览器都支持 resize 属性，但是一些老版本的浏览器可能不支持，或者支持得不够好。所以，在使用 resize 属性时，最好还是做一些兼容性处理。

自定义拖拽调整大小组件：告别丑陋的默认样式

既然 resize 属性的默认样式这么丑，而且还存在一些兼容性问题，那我们能不能自己做一个拖拽调整大小的组件呢？答案是肯定的！

思路：

隐藏默认的拖拽指示器： 使用 resize: none; 禁止浏览器显示默认的拖拽指示器。
添加自定义的拖拽指示器： 在元素右下角添加一个自定义的元素（比如一个 div），作为拖拽指示器。
监听鼠标事件： 监听鼠标按下、移动和释放事件，计算元素的新的宽度和高度，并更新元素的样式。

代码示例（简化版）：

<div class="resizable">
  <div class="content">
    这里是可调整大小的内容。
  </div>
  <div class="resizer"></div>
</div>

.resizable {
  position: relative; /* 关键：需要设置为相对定位 */
  width: 200px;
  height: 150px;
  border: 1px solid #ccc;
  overflow: auto; /* 关键：需要设置 overflow 属性 */
}

.content {
  width: 100%;
  height: 100%;
}

.resizer {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  background-color: #3498db;
  cursor: se-resize; /* 设置鼠标样式 */
}

const resizable = document.querySelector('.resizable');
const resizer = document.querySelector('.resizer');

let isResizing = false;

resizer.addEventListener('mousedown', (e) => {
  isResizing = true;
  document.addEventListener('mousemove', resize);
  document.addEventListener('mouseup', stopResize);
});

function resize(e) {
  if (!isResizing) return;

  const newWidth = e.clientX - resizable.offsetLeft;
  const newHeight = e.clientY - resizable.offsetTop;

  resizable.style.width = newWidth + 'px';
  resizable.style.height = newHeight + 'px';
}

function stopResize() {
  isResizing = false;
  document.removeEventListener('mousemove', resize);
  document.removeEventListener('mouseup', stopResize);
}

代码解释：

HTML： 创建一个 resizable 容器，包含 content 内容区域和 resizer 拖拽指示器。
CSS：
- resizable 容器需要设置为 position: relative;，这样 resizer 才能相对于它进行定位。
- resizable 容器需要设置 overflow: auto;，这样 resize 属性才能生效（即使我们隐藏了默认的拖拽指示器）。
- resizer 拖拽指示器使用 position: absolute; 定位到容器的右下角。
- cursor: se-resize; 设置鼠标样式，当鼠标悬停在拖拽指示器上时，显示为“东南”方向的调整大小箭头。
JavaScript：
- 监听 resizer 的 mousedown 事件，当鼠标按下时，开始调整大小。
- 监听 document 的 mousemove 事件，当鼠标移动时，计算元素的新的宽度和高度，并更新元素的样式。
- 监听 document 的 mouseup 事件，当鼠标释放时，停止调整大小。

进阶：让你的拖拽组件更完美

上面的代码只是一个简单的示例，还有很多可以改进的地方：

限制最小/最大尺寸： 可以添加逻辑，限制元素的最小和最大宽度和高度，防止用户将其调整得太小或太大。
添加动画效果： 在调整大小的过程中，可以添加一些动画效果，让调整过程更流畅。
处理边界情况： 当鼠标移动到屏幕边缘时，可能会出现问题。需要处理这些边界情况，确保拖拽过程的稳定性。
优化性能： 在 mousemove 事件中，频繁更新元素的样式可能会影响性能。可以使用 requestAnimationFrame 来优化性能，减少重绘和回流。

总结：

resize 属性是一个简单而强大的 CSS 属性，可以让你轻松地实现元素的伸缩功能。但是，它的默认样式比较丑陋，而且存在一些兼容性问题。通过自定义拖拽调整大小组件，可以告别丑陋的默认样式，并提供更灵活、更可控的调整大小体验。

希望这篇文章能让你对 resize 属性有更深入的了解，并且能够掌握自定义拖拽调整大小组件的技巧。下次再遇到需要调整大小的元素时，你就可以自信地说：“这个问题，我来搞定！” 记住，前端的世界，没有什么是不能自定义的！只要你敢想，敢做，就能创造出令人惊艳的作品。

CSS resize 属性：你以为的“调整大小”和它背后的故事

发表回复 取消回复

发表回复取消回复