React 快速实现拖拽改变容器宽高度

简介: React 快速实现拖拽改变容器宽高度

一、前言

有时我们需要对一个容器的宽高度进行动态的修改,

最简单直接的方法一般为:用户可以拖拽容器的边缘来改变其大小,例如下面这样的效果:

在react中,我们可以使用re-resizable这个三方库来快速的实现上面的效果。

二、re-resizable使用讲解

首先在我们的项目中安装re-resizable:

# 使用npm
npm install --save re-resizable
# 使用yarn
yarn add re-resizable

然后使用下面的代码就可以实现刚刚的效果了:

import { Resizable } from 're-resizable';
export default function Demo() {
  return (
    <Resizable defaultSize={{ width: 300, height: 300 }} style={{ margin: 30 }}>
      <div style={{ backgroundColor: 'blue', width: '100%', height: '100%' }}></div>
    </Resizable>
  );
}

re-resizable提供了许多的参数和事件:


更多参数说明可以访问官方仓库中查看,这里不再赘述。

三、更复杂的使用

有时候我们会遇到的需求会复杂一些,例如:总宽度是固定的,改变一个容器的宽度,其他容器的宽度会自动增大或减小。

如下图所示,有两个并排排列,颜色不同的容器,拖拽蓝色容器的右边缘可动态改变二者的宽度:

实现的上述效果也很简单,re-resizable提供了onResize方法给我们,在我们调整宽度时,会输出其容器改变后的的位置信息:


输出如下:


所以我们可以利用该方法,将改变了多少宽度值放在state中,然后再红色容器的宽度设置中,减去该值就可以实现上述的效果了。

完整代码如下:

import { Resizable } from 're-resizable';
import { useState } from 'react';
export default function Demo() {
  const [w, setW] = useState<number>(0);
  return (
li    <div style={{ display: 'flex', margin: 30 }}>
      <Resizable defaultSize={{ width: 400, height: 300 }} maxWidth={700} onResize={(e: any) => setW(e.x - 400)}>
        <div style={{ backgroundColor: 'blue', width: '100%', height: '100%' }}></div>
      </Resizable>
      <div style={{ backgroundColor: 'red', width: `calc(400px - ${w}px)`, height: 300 }}></div>
    </div>
  );
}

四、结合antd组件

当然,是可以结合antd组件来使用的,下面的效果图来自我们的实际项目,左侧是模块树,右侧是用例列表,可以拖拽模块树边缘来动态改变二者的宽度:

目录
相关文章
|
人工智能 JSON 前端开发
顶级好用的 React 表单设计生成器,可拖拽生成表单
React 前端开发中,表单组件是排在前三的高频使用的组件,如何快速构建表单,节省力气,避免重复造轮子呢,选择一款适合自己的前端表单设计生成器就非常重要了。本文介绍 3 款顶级好用的 React 表单设计器,其中最后一款卡拉云,是新一代低代码开发工具,不仅能自动生成各类表单,还可以拖拽生成其他常见的前端组件,一行代码连接前后端数据,可快速接入数据库/api。它是表单设计器的超集,可直接生成属于你的后台管理工具,无敌好用。
3282 0
|
前端开发 JavaScript API
React Draggable 实现拖拽 - 最详细中文教程 - 卡拉云
React Draggable 是 react 生态中,最好用的拖拽实现库之一。如果你的应用中需要实现拖拽功能,可以尝试用 react-draggable,它可以满足多数情况下的拖拽需求,比如一个弹出设置浮窗,可以相互遮挡的容器之类。在所有 react 拖拽库里(即 react dnd, drag and drop),react-draggable 算是把功能性和易用性平衡得最好的拖拽库了。
2844 0
|
2月前
|
前端开发 JavaScript API
React拖拽实践
React拖拽实践
19 0
|
4月前
|
前端开发 JavaScript API
React拖拽实践
React拖拽实践
|
9月前
|
前端开发 容器
封装React组件DragLine,鼠标拖拽的边框改变元素宽度
封装React组件DragLine,鼠标拖拽的边框改变元素宽度
118 0
|
4月前
|
前端开发
用react实现手机端限制拖拽实现
用react实现手机端限制拖拽实现
35 0
|
4月前
|
应用服务中间件 nginx Docker
将 react-typescript + django 部署到 nginx 容器(docker)
将 react-typescript + django 部署到 nginx 容器(docker)
62 0
|
5月前
|
存储 前端开发
react 实现低耦合 拖拽项目的思路
react 实现低耦合 拖拽项目的思路
38 0
|
8月前
|
前端开发
|
8月前
|
前端开发 API 容器
React Draggable 实现图片拖拽
React Draggable 实现图片拖拽
279 0