<div id="readability-page-1" class="page"><article id="post-10410">
				

							<div>
												
<h2>의존성 설치</h2>
<pre><code>npm i react-draggable</code></pre>
<h2>구현</h2>
<p>Dialog 와 DialogTitle 에 각각 코드를 작성해주면 된다.</p>
<p>팝업 뿐만 아니라 <code>&lt;div&gt;</code> 같은 것도 밖에서 감싸서 드래그 가능한 컴포넌트로 만들수 있는 듯 하다.</p>
<pre><code>import {
    Dialog,
    DialogTitle,
    DialogContent,
    DialogActions,
    // .............
    Paper
} from '@mui/material';
import Draggable from 'react-draggable';

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

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

// ......
    return (
        &lt;Dialog
            open={open}
            onClose={onClose}
            maxWidth="lg"
            fullWidth
            PaperComponent={PaperComponent}
            PaperProps={{
                style: {
                    transform: `translate(${defaultPosition.x}px, ${defaultPosition.y}px)`
                }
            }}
        &gt;
            &lt;DialogTitle id="draggable-dialog-title" style={{ cursor: 'move' }}&gt;
                제품 선택
            &lt;/DialogTitle&gt;</code></pre>
<p><span></span> <span>Post Views:</span> <span>5</span>
			</p>											</div>
		
	
	</article></div>

상구리의 기술 블로그

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>

React – 드래그 가능한 팝업

댓글