[javascript] drag시 화면밖을 벗어났는지 판단하는 법

drag & drop 을 구현하다가 브라우저 안에서 드래그해서 브라우저 밖에다가 놨을때를 판단할 일이 생겼다.

1번에서 시작해서 2번에다가 놓을 때 지금 하고 있는 모든행동을 취소 해야했다.

document.addEventListener('dragend', function(event){
  if(isOutOfBrowser(event)){
    alert('화면 밖을 벗어날 수 없습니다');
  }
})

function isOutOfBrowser(event){
	return event.clientX < 0 || event.clientX > window.innerWidth;
}

dragend 이벤트의 event값에 있는 clinetX값은 브라우저를 왼쪽으로 벗어났으면 0보다 작은값 오른쪽으로 벗어났으면 브라우저창의 크기보다 큰값을 가진다.

그 특성을 이용하여 브라우저 영역을 벗어났는지 판단할 수 있다.