{{format('0')}} {{format('1442')}} {{format('984')}}

【React】拖拽改变div宽度 [ 前端 ]

晚安月亮 文章 正文

挣钱给咖喱买最好吃的罐罐
分享

椰奶冻

{{nature("2023-02-24 16:49:30")}}更新

resizable实现拖拽改变div宽度

记录一下需求，方便下次粘贴。

要求是右侧可以拖拽调节大小，并且hover上去要有蓝色竖线提示，只需要使用resizable这个js库，这个需求就非常简单了~~

1.效果展示

2.使用方法

  1. yarn add re-resizable或者npm install --save re-resizable安装组件

  2. 在项目中引用

    handleLine下的div才是移动的块，所以我们设置的是它下层的div

    Index.less

    .resizable {
   transition: all 0.4s; // 给拖拽的时候加上动画，看起来更流畅了~
}
.handleLine {
   div {
       width: 2px !important;
       right: 0 !important;
       transition: all 0.4s;
   }
   div:hover, div:active {
       width: 2px !important;
       background-color: #1890ff !important;
   }
}

    handleLine下的div才是移动的块，所以我们设置的是它下层的div

    更多api使用方法见官方文档~

评论 0
0
{{userInfo.data?.nickname}}
{{userInfo.data?.email}}
TOP 1
{{format('1443')}}人已阅读
【React】拖拽改变div宽度
TOP 2
【笔经】数字马力前端笔试-22应届

{{nature('2022-06-23 23:10:58')}} {{format('1214')}}人已阅读

TOP 3
【React】React组件卸载生命周期、路由跳转、页面关闭（刷新）拦截提示

{{nature('2023-02-03 16:12:08')}} {{format('1074')}}人已阅读

TOP 4
【antd】DatePicker组件不可选中时间段

{{nature('2022-09-16 11:11:28')}} {{format('466')}}人已阅读

TOP 5
【前端】css 实现两行或多行文本溢出显示省略号

{{nature('2023-05-25 10:42:41')}} {{format('398')}}人已阅读

目录

标签云

React

一言

# {{hitokoto.data.from || '来自'}} #
{{hitokoto.data.hitokoto || '内容'}}
作者：{{hitokoto.data.from_who || '作者'}}
自定义UI
配色方案
侧边栏