[Jquery] draggable 무한으로 드레그 될 때 영역제한하는 코드

| 문제상황

제이쿼리 기본 draggable 메서드를 사용해서 화면내에서 드레그로

오브젝트를 이동시키는 환경에서

오브젝트를 html바깥쪽으로 이동하면 그만큼 가로세로축이 늘어나는 상황..

 

시계를 화면 바깥으로 이동하니 X축 width도 같이 늘어나는 모습ㄷㄷ

 

 

 $(document).ready(function () {
               // 드래그 가능한 요소 생성
               $(".draggable_clock, .draggable_bgm").draggable({
                   touchAction: "auto", // 터치 이벤트 활성화
                   grid: [10, 10],
                   containment: 'main'// 드레그 영역 제한
               });
           
               // 드롭 영역 설정
               $("#dropArea").droppable({
                   drop: function (event, ui) {
                       // 드롭된 요소를 영역 안으로 이동
                       ui.draggable.appendTo(this);
                   }
               });
           });

 

내 상황의 경우,

<main> 안에서 드레그 가능한 요소가 움직이면 되기 때문에 

containment를 'main' 으로 지정하여 해결

(.box라던가 #wrap, window,parent,document 등 다양한 요소에 적용도 가능하다!)

 

 

 

제이쿼리 넘 편하네....