JAVASCRIPT
iframe모달 창(새창)에 draggable 드래그엔드랍 기능 넣기
보망고
2020. 7. 17. 11:46
반응형
새로운 창을 띄우는 게 귀찮아서 iframe을 이용해 모달창을 만들었다.


요 iframe 창을 드래그앤드랍 할 수 있게 제이쿼리 플러그인을 사용했다.
제이쿼리 플러그인인 draggable을 넣으려니, iframe에 넣어야할 지 iframe을 싸고 있는 부모요소에 넣어야할지 좀 고민되더라.
iframe에 일단 넣어봤더니, 역시나 창 안에 iframe 영역만 이동한다.

요런식으로!
그래서 draggable 기능을 찾아보니 handle이 있더라!
handle을 적용하니 handle 부분으로 이동이 가능해짐.
<div id="popup" class="draggable">
<div class="handle"></div>
<iframe src="" name=""></iframe>
</div>
html은 대략 이렇게.
.popup{position:fixed; top: 50%; left: 50%; }
.handle{position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 20px;}
css는 대략 이렇게.. 20px 높이의 바가 생기고. 이 바를 클릭하고 이동하면 드랙엔드뢉이 된다.
$('.draggable').draggable({
handle: ".handle",
iframeFix: true
});
js는 대략 이렇게....
반응형