账号密码登录
忘记密码注册账号
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
获取验证码
找回密码返回
邮箱找回 手机找回
获取验证码
注册账号返回
获取验证码
其他登录方式
登录即同意《用户使用协议》和《用户隐私条款》
问答主页 -> 电脑网络
分享
  • 收藏
    X
    React div里的多个children components 如何推拽调整大小？
    • 师傅被妖怪抓走了2020-01-01 00:00
    • 10
    30
    0 
    <div style="height:120px">
    <child style="height:40px"/>
    <child style="height:40px"/>
    <child style="height:40px"/>
</div>

    需求是，children 数量不固定，位置是固定的，比如说只有3个children，向上拖拽第二个组件，第二个组件的height变大从40到45，第一个子组件的高度从40变成35.
    请教该如何实现？

    0
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得：提问者悬赏的 10 元积分
        全部回答
    • 共 0 条
    • 爱只为她 普通会员 1楼

      在React中，你可以使用react-draggable库来实现动态的容器大小调整。这个库允许你为每个容器添加拖放事件，然后根据拖放事件的改变来调整容器的大小。

      以下是一个简单的例子：

      ```jsx import React from 'react'; import Draggable from 'react-draggable';

      const DraggableItem = ({ item, onDragEnd }) => (

      {item.name}
      );

      function Container({ items }) { return (

      {items.map((item, index) => ( console.log('Item dragging is done')} /> ))}
      ); }

      export default Container; ```

      在这个例子中，Container组件接收一个包含多个DraggableItem的数组作为参数。每个DraggableItem都包含一个用于显示容器内容的div元素和一个用于触发拖放事件的onDragEnd函数。

      当用户将一个DraggableItem拖动到容器的边缘时，onDragEnd函数会被调用。这个函数会打印一条消息到控制台，表示拖动的容器内容已经结束。

      你可以在你的React组件中使用这个库，如下所示：

      ```jsx import React from 'react'; import Container from './Container';

      const App = () => { return (

      ); };

      export default App; ```

      在这个例子中，App组件包含一个包含三个DraggableItem的数组。每个DraggableItem都包含一个用于显示容器内容的div元素。

    0 打赏 回复
    更多回答
    网站公告
    扫一扫访问手机版

    回答动态

    • 回到顶部
    • 回到顶部