드래그 앤 드롭에서 dragend 이벤트의 기본 동작을 중지하는 방법

HTML5 드래그 앤 드롭을 구현하다 보면 dragend 이벤트의 기본 동작을 중지하고 싶은 경우가 있습니다. 그런데 대부분의 브라우저에서는 dragend 이벤트에 대해 e.preventDefault()가 정상적으로 작동하지 않기 때문에, 다른 접근 방식이 필요합니다.

핵심 아이디어는 간단합니다. 바로 마우스 포인터가 원하는 드롭 대상 위에 위치해 있는지 감지하고, 그 경우에만 원하는 동작을 수행하는 것입니다.

마우스가 드롭 대상 위에 있는지 확인하기

예를 들어, 마우스가 목록 영역 위에 있을 때만 노드를 삽입하고 싶다면 다음과 같이 처리할 수 있습니다.

listContainer.insertBefore(source, myNode);

이 코드는 source 노드를 myNode 앞에 삽입하는 동작으로, 마우스가 목록 위에 있을 때만 실행되어야 합니다.

jQuery를 활용한 구현 방법

jQuery의 :hover 선택자를 사용하면 마우스 커서가 특정 요소 위에 있는지 손쉽게 확인할 수 있습니다.

if ($(mylist).parent().find(":hover")) {
    listContainer.insertBefore(source, myNode);
}

위 코드는 mylist의 부모 요소 내부에 마우스 커서가 존재하는지 검사한 뒤, 조건이 충족되면 노드를 삽입합니다. 이렇게 하면 dragend 이벤트가 발생했을 때 드롭 대상 위에서 끝난 경우에만 원하는 로직이 실행됩니다.

추가로 알아두면 좋은 사항

• :hover는 CSS 의사 클래스이지만, jQuery 선택자로도 활용할 수 있어 편리합니다.
• 모바일 환경에는 호버 상태가 존재하지 않으므로, 터치 기반 드래그 앤 드롭이라면 별도의 이벤트 처리가 필요합니다.
• 순수 자바스크립트를 선호한다면 document.elementFromPoint() 또는 element.matches(':hover')를 대안으로 사용할 수 있습니다.