iframe모달 창(새창)에 draggable 드래그엔드랍 기능 넣기

새로운 창을 띄우는 게 귀찮아서 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는 대략 이렇게....