보통의 팝업창들은 마우스로 움직이는 기능이 빠져 있습니다.
근데 간단하게 마우스로 이동 가능하게 할 수 있는 방법을 찾아서 팁을 남깁니다.
[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을 클릭해 보시면 팝업창이 열립니다. 마우스로 움직여 보세요.