react 드래그 modal 예제

windows에서 create-react-app으로 예제 프로젝트를 준비했다.

https://reactstrap.github.io/

react에서 bootstrap을 컴포넌트를 제공하는 라이브러리가 있다. reactstrap이라는 라이브러리이다.

설치하자. 이 라이브러리에 있는 모달을 사용할 예정이다.

npm install --save reactstrap react react-dom

https://www.npmjs.com/package/react-draggable

react에서 마우스 드래그 기능을 제공하는 라이브러리이다 설치하자.

해당 라이브러리는 modal에만 해당하는것이 아니라 감싼 컴포넌트 모두를 지원한다.

npm install react-draggable

ModalExample.js 라는 파일을 만들자. 이 파일이 마우스 드래그가 가능한 모달 컴포넌트이다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
    import React from 'react';
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
import Draggable from 'react-draggable';

class ModalExample extends React.Component {
constructor(props) {
super(props);
this.state = {
modal: false
};

this.toggle = this.toggle.bind(this);
}

toggle() {
this.setState(prevState => ({
modal: !prevState.modal
}));
}

render() {
return (
<div>
<Button color="danger" onClick={this.toggle}>{this.props.buttonLabel}</Button>
<Draggable
axis="both"
handle=".handle"
defaultPosition={{x: 0, y: 0}}
position={null}
grid={[25, 25]}
scale={1}
onStart={this.handleStart}
onDrag={this.handleDrag}
onStop={this.handleStop}>
<Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className}>
<ModalHeader toggle={this.toggle} className="handle">Modal title</ModalHeader>
<ModalBody>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</ModalBody>
<ModalFooter>
<Button color="primary" onClick={this.toggle}>Do Something</Button>{' '}
<Button color="secondary" onClick={this.toggle}>Cancel</Button>
</ModalFooter>
</Modal>
</Draggable>
</div>
);
}
}

export default ModalExample;

App.js

import React from 'react';
import './App.css';

import ModalExample from './ModalExample';

function App() {
return (
<div className="App">
<ModalExample buttonLabel={"모달 테스트"}></ModalExample>
</div>
);
}

export default App;

npm run start 로 실행해보자.

모달창을 열고 모달의 제목을 마우스로 드래그 하면 드래그가 가능한 것을 확인 할 수 있다.

현재 드래그가 좀 버벅이는 것 처럼 보이는데, 그것은 react-draggable의 옵션으로 부드러움 정도를 설정 할수 있다.

해당 예제는 아래 github에 올려놓았다.

https://github.com/hanumoka/react-modal-draggable.git