jquery 제이쿼리 모달 팝업 드래그 하기 드래그 옵션 jquery draggable() 화면 넘어가는 것 방지

 

jquery 제이쿼리 모달 팝업 드래그 하기 드래그 옵션 jquery draggable() 화면 넘어가는 것 방지

 

레이어 팝업에 대한 저옵와 구현방법은 아래의 Link 를 참조하세요.

 

Link1 : jquery 제이쿼리 레이어 팝업 화면 중앙에 띄우는 방법

 

 

레이어 팝업의 드래그를 하기 위해선 jquery-ui.js 파일이 필요합니다.

 

구글링으로 찾아서 다운 받으셔도 되고

 

아래의 스크립트를 레이어 팝업의 드래그가 필요한 화면에 넣어주시면 됩니다.

 

<script type="text/javascript" src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>

 

이제 소스를 보겠습니다.

예를 들어 아래와 같은 레이어 팝업이 있다고 합시다.

 

 

 

처음에 레이어팝업은 위치가 고정입니다.

 

그래서 이 팝업을 드래그가 가능하게 하기 위해선 draggable() 함수를 사용합니다.

 

$(function(){

$('#pop_stop_info_detial').draggable();

});

 

 

 

위와 같이 추가를 하게 되면 레이어 팝업의 어느곳을 드래그 하든 팝업을 움직일 수 있습니다.

 

특정위치를 제외한 곳을 드래그 했을 때만 움직이게 하고 싶다면

 

cancel 옵션을 추가합니다.

 

 

$(function(){

$('#pop_stop_info_detial').draggable({'cancel':'.tbl'});

});

 

저는 tbl class를 제외하고 드래그가 가능하게 한것입니다.

일반적인 경우처럼 상단의 타이틀바만 드래그가 되게 하기 위함입니다.

 

 

 

 

 

 

 

참조 : https://jqueryui.com/draggable/

 

 

참고로 위와 같이 레이어 팝업의 드래그 옵션을 줄 경우, 드래그해서 화면을 넘어가면

팝업창이 사라지는 경우가 있다.

이를 막기 위해 containment 와 scroll옵션을 사용한다.

 

$(function(){

$('#pop_stop_info_detial').draggable({'cancel':'.tbl', containment:'parent', scroll:false});

});

 

위와같이 옵션을 추가해줄 경우 팝업이 상위 div를 넘어가지 못하게 된다.

(parent 대신에 상위 div  id 를 주게 되면 그 범위를 벗어나지 못한다.)

 

참조 : https://jqueryui.com/draggable/#constrain-movement