React – 드래그 가능한 팝업

의존성 설치

npm i react-draggable

구현

Dialog 와 DialogTitle 에 각각 코드를 작성해주면 된다.

팝업 뿐만 아니라 <div> 같은 것도 밖에서 감싸서 드래그 가능한 컴포넌트로 만들수 있는 듯 하다.

import {
    Dialog,
    DialogTitle,
    DialogContent,
    DialogActions,
    // .............
    Paper
} from '@mui/material';
import Draggable from 'react-draggable';

function PaperComponent(props) {
    return (
        <Draggable
            handle="#draggable-dialog-title"
            defaultPosition={{ x: 0, y: 0 }}
            position={null}
            grid={[25, 25]}
            scale={1}
        >
            <Paper {...props} />
        </Draggable>
    );
}

const [defaultPosition, setDefaultPosition] = useState({ x: 0, y: 0 });

// ......
    return (
        <Dialog
            open={open}
            onClose={onClose}
            maxWidth="lg"
            fullWidth
            PaperComponent={PaperComponent}
            PaperProps={{
                style: {
                    transform: `translate(${defaultPosition.x}px, ${defaultPosition.y}px)`
                }
            }}
        >
            <DialogTitle id="draggable-dialog-title" style={{ cursor: 'move' }}>
                제품 선택
            </DialogTitle>