alpinejs 을 사용할때, 모달 창 영역 밖을 클릭해서 open false 할때 드래그 클릭 문제점 수정

alpinejs 에서 @click.outside=“open = false” 를 할 경우에, 드래그 문제 수정하는 방법이다.

모달 창을 작업할때, 많은 예제에 @click.outside 를 사용한다. 근데 여기서 문제는 이렇게 할 경우에, 모달 창 input 에서 드래그하다가 실수로 모달 창 영역 밖에서 클릭을 떼는순간, outside 이벤트가 발생하여 모달 창이 닫히는 문제가 발생한다.

이 문제를 해결하기 위해서는 모달 창 밖의 div 영역에 이벤트를 @mousedown.self="open = false" 를 설정해줘야 한다.

그래야지만, 드래그를 통한 영역 외부 클릭에는 모달 창이 안닫히게 설정할 수 있다.