React实现拖拽改变宽度

简介: React实现拖拽改变宽度

插件



使用了第三方插件 re-resizableReact组件可以很便捷的实现可拖拽改变组件宽度高度。

安装方法

yarn add re-resizable

npm install re-resizable


属性



image.png


示例



import React, {Component} from 'react';
import { Resizable } from "re-resizable";
export default class Demo extends Component {
    render() {
        return (
            <Resizable
                style={{background: "#8cdbd5"}}
                defaultSize={{width:320, height:200}}
            >
               111111111
            </Resizable>
        );
    }
}


相关文章
|
2月前
|
前端开发 测试技术 容器
React 快速实现拖拽改变容器宽高度
React 快速实现拖拽改变容器宽高度
42 0
|
2月前
|
前端开发 JavaScript API
React拖拽实践
React拖拽实践
22 0
|
4月前
|
前端开发 JavaScript API
React拖拽实践
React拖拽实践
|
9月前
|
前端开发 容器
封装React组件DragLine,鼠标拖拽的边框改变元素宽度
封装React组件DragLine,鼠标拖拽的边框改变元素宽度
119 0
|
4月前
|
前端开发
用react实现手机端限制拖拽实现
用react实现手机端限制拖拽实现
35 0
|
5月前
|
存储 前端开发
react 实现低耦合 拖拽项目的思路
react 实现低耦合 拖拽项目的思路
39 0
|
8月前
|
前端开发
|
8月前
|
前端开发 API 容器
React Draggable 实现图片拖拽
React Draggable 实现图片拖拽
291 0
|
8月前
|
移动开发 前端开发 JavaScript
react-draggable实现拖拽详解
react-draggable实现拖拽详解
|
8月前
|
前端开发
【React工作记录九十】ant design table实现上下行拖拽功能(类组件)
【React工作记录九十】ant design table实现上下行拖拽功能(类组件)
116 0