一学就会：轻松搭建可拖拽容器布局组件

前端

2023-10-28 20:24:30

构建可拖拽容器布局组件：提升交互式布局体验

概览

随着设计理念的不断演进和用户需求的不断提升，产品页面布局要求变得愈发多样化和交互式。特别是对于国际化产品，列宽的调整显得尤为重要，以适应不同语言环境和设备屏幕尺寸。

本文将从零开始，手把手指导您构建一个可拖拽的容器布局组件，让用户能够轻松调整列宽，自定义布局，从而优化用户体验，打造交互式布局。

组件设计

可拖拽容器布局组件由两部分组成：

容器布局： 定义列的总体结构、样式并提供拖拽调整功能。
列组件： 容器布局中的子组件，代表一列，包括列宽、内容和其他属性。

构建步骤

1. 创建容器布局组件

import React from 'react';
import { useState } from 'react';

const ContainerLayout = () => {
  const [columns, setColumns] = useState([{ width: '33%' }, { width: '33%' }, { width: '33%' }]);

  const handleResize = (index, offset) => {
    const newColumns = [...columns];
    newColumns[index].width = `${parseInt(newColumns[index].width) + offset}%`;
    setColumns(newColumns);
  };

  return (
    <div className="container-layout">
      {columns.map((column, index) => (
        <Column key={index} width={column.width} onResize={handleResize} />
      ))}
    </div>
  );
};

export default ContainerLayout;

2. 创建列组件

import React, { useRef } from 'react';
import { useState } from 'react';

const Column = ({ width, onResize }) => {
  const ref = useRef(null);

  const handleResizeStart = (e) => {
    e.preventDefault();
    document.addEventListener('mousemove', handleResizeMove);
    document.addEventListener('mouseup', handleResizeEnd);
  };

  const handleResizeMove = (e) => {
    const offset = e.clientX - ref.current.offsetLeft;
    onResize(ref.current.clientWidth, offset);
  };

  const handleResizeEnd = () => {
    document.removeEventListener('mousemove', handleResizeMove);
    document.removeEventListener('mouseup', handleResizeEnd);
  };

  return (
    <div className="column" style={{ width: width }} ref={ref} onMouseDown={handleResizeStart}>
      {/* 内容 */}
    </div>
  );
};

export default Column;

3. 使用组件

import ContainerLayout from './ContainerLayout';

const App = () => {
  return (
    <div className="app">
      <ContainerLayout />
    </div>
  );
};

export default App;