巧用Vue实现拖拽式DIV高度调节，打造个性化体验

2023-12-23 15:35:33

灵感源自微信的聊天窗口设计，通过对div元素的巧妙拖拽，我们可以轻松实现对div高度的自定义调节，赋予用户前所未有的个性化体验。

要实现这一功能，我们可以借鉴Element UI中table组件中列宽拖拽的思路，通过监听鼠标事件和动态更新CSS样式来完成。

首先，需要监听鼠标在div元素上按下的事件。当鼠标按下时，记录下鼠标按下的位置（y轴坐标）以及div元素当前的高度。

const div = document.querySelector('.draggable-div');
div.addEventListener('mousedown', (e) => {
  // 记录鼠标按下的位置和div当前的高度
  startY = e.clientY;
  startHeight = div.clientHeight;
});

接下来，监听鼠标移动事件。当鼠标移动时，计算鼠标移动的距离，并将其转换为div元素高度的变化量。

div.addEventListener('mousemove', (e) => {
  // 计算鼠标移动的距离
  const deltaY = e.clientY - startY;
  
  // 更新div元素的高度
  div.style.height = `${startHeight + deltaY}px`;
});

为了防止div元素被拖拽到超出屏幕范围，需要在鼠标移动过程中进行一些边界判断。

// 添加边界判断
if (div.style.height < '100px') {
  div.style.height = '100px';
} else if (div.style.height > '500px') {
  div.style.height = '500px';
}

最后，当鼠标松开时，需要移除鼠标移动事件监听，并保存当前div元素的高度。

div.addEventListener('mouseup', () => {
  // 移除鼠标移动事件监听
  div.removeEventListener('mousemove', mousemoveHandler);
  
  // 保存当前div元素的高度
  localStorage.setItem('divHeight', div.style.height);
});

通过上述步骤，我们就可以实现拖拽式div高度调节功能。

为了提升用户体验，我们还可以添加一些额外的细节，例如：