보통의 팝업창들은 마우스로 움직이는 기능이 빠져 있습니다.
근데 간단하게 마우스로 이동 가능하게 할 수 있는 방법을 찾아서 팁을 남깁니다.
[XE문법을 기준으로 합니다]
1. 상단에 코드 추가
<!-- js 파일을 가져옵니다. -->
<!--%import("normal.js")-->
<!--%import("http://code.jquery.com/jquery-1.9.1.js")-->
2. 팝업 Body의 최상단 테이블에 id="pop-up"로 지정 (자신이 원하는 이름으로 변경해도 됨, 그럼 아래 3번 코드안에도 모두 변경해야함)
<div id="pop-up" style="position:fixed; top:{$widget_info->board_top}%; left:{$widget_info->board_left}%; z-index:99; cursor:move; ">
3. js 파일을 하나 만들어서 아래 코드 추가 (샘플로 normal.js)
var x_styleLeft, y_styleTop, x_accept, y_accept; $(document).ready(function(){ $('#pop-up').mousedown(function(event) { x_styleLeft = event.clientX - $("#pop-up").offset().left; y_styleTop = event.clientY - $("#pop-up").offset().top; $(document).mousemove(function(event){ x_accept = event.clientX - x_styleLeft; y_accept = event.clientY - y_styleTop; $("#pop-up").css("left",x_accept+"px"); $("#pop-up").css("top",y_accept+"px"); }); }); }).mouseup(function(){ $(this).off('mousemove'); }); $('#pop-up').css('cursor', 'move')
이렇게 간단히 코드 추가하면 마우스로 팝업창이 움직입니다.
이 게시판 상단에 Click을 클릭해 보시면 팝업창이 열립니다. 마우스로 움직여 보세요.
레이아웃 최상단에 애니메이션 효과로 펼쳐...
Tip이 도움이 되었다면 댓글과 평가 부탁합니다.
Tip에 대한 궁금한 점은 댓글로 남겨 주시면 성심껏 답변 드립니다. 
