re-resizable react-draggable antd Modal 拖拽缩放

最新推荐文章于 2024-11-12 16:18:03 发布

破晓小v

最新推荐文章于 2024-11-12 16:18:03 发布

阅读量557

点赞数 3

分类专栏： Ant Design 前端文章标签： react.js 前端 antd Modal re-resizable react-draggable

本文链接：https://blog.csdn.net/weixin_41983443/article/details/136177145

版权

前端同时被 2 个专栏收录

18 篇文章

订阅专栏

Ant Design

1 篇文章

订阅专栏

本文介绍了如何在React应用中集成`react-draggable`和`re-resizable`库，实现一个可拖动和调整大小的弹出式模态框(antdModal)，并管理其尺寸状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

re-resizable react-draggable antd Modal 拖拽缩放

import {Modal} from 'antd';
import Draggable from 'react-draggable';
import {Resizable} from 're-resizable';


const [resizableWidth, setResizableWidth] = useState<number>(300);
const [resizableHeight, setResizableHeight] = useState<any>(500);

const onStart = (_event: DraggableEvent, uiData: DraggableData) => {
        const {clientWidth, clientHeight} = window.document.documentElement;
        const targetRect = draggleRef.current?.getBoundingClientRect();
        if (!targetRect) {
            return;
        }
        setBounds({
            left: -targetRect.left + uiData.x,
            right: clientWidth - (targetRect.right - uiData.x),
            top: -targetRect.top + uiData.y,
            bottom: clientHeight - (targetRect.bottom - uiData.y),
        });
    };
return (
<Modal
                title="错误提示"
                open={isModalOpen}
                onCancel={handleCancel}
                footer={null}
                maskClosable={false}
                width={resizableWidth}
                className={c.error_info_wrapper}
                closeIcon={<img style={{cursor: 'pointer'}} src={ICON_CLOSE} onClick={handleCancel} />}
                modalRender={modal => (
                    <Draggable
                        bounds={bounds}
                        onStart={(event, uiData) => onStart(event, uiData)}
                    >
                        <div ref={draggleRef}>
                            <Resizable
                                enable={{
                                    top: true,
                                    right: true,
                                    bottom: true,
                                    left: true,
                                    topRight: true,
                                    bottomRight: true,
                                    bottomLeft: true,
                                    topLeft: true,
                                }}
                                maxWidth={500}
                                minWidth={250}
                                minHeight={300}
                                maxHeight={700}
                                boundsByDirection
                                size={{width: resizableWidth, height: resizableHeight}}
                                onResizeStop={(e, direction, ref, d) => {
                                    setResizableWidth(resizableWidth + d.width);
                                    setResizableHeight(resizableHeight + d.height);
                                }}
                            >
                                {modal}
                            </Resizable>
                        </div>
                    </Draggable>
                )}
            >
                test test 
            </Modal>
            )

.error_info_wrapper{
pointer-events: unset !important;
:global{
        .ant-modal-content{
            height: 100%;
        }
        
    }
}