[web] 브라우저에서 드래깅 선택을 막는 방법

브라우저에서 마우스 드래그로 텍스트(또는 요소) 선택을 막는 방법은 주로 CSS와 JavaScript로 차단할 수 있습니다.
보통은 CSS 방식만으로도 충분 합니다. JS는 보조 수단으로 사용게 됩니다.

CSS로 드래그 선택 차단하는 방법

가장 간단하고 확실한 방법입니다.

.no_select {
    -webkit-user-select: none; /* Chrome, Safari */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* IE, Edge */
    user-select: none;         /* 표준 */
}

<div class="no_select">
    이 영역은 드래그로 선택할 수 없습니다.
</div>

위와 같이 CSS를 적용해 놓으면, 텍스트 선택, 더블 클릭 선택, 드래그 선택이 모두 차단됩니다.

전체 페이지에서 선택 차단

다음과 같이 BODY 요소에 적용하면 페이지 전체에서 드래그 선택이 차단됩니다.

body {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

주의할 점은 입력창("input", "textarea")까지 막힐 수가 있다는 점입니다.

위와 같이 BODY에 드래그 선택을 제한하고 입력 요소는 예외 처리하려면 다음과 같이 CSS를 적용하면 됩니다.

input, textarea {
    user-select: text;
}

이미지 드래그 차단

img {
    -webkit-user-drag: none;
    user-drag: none;
    pointer-events: none;
}

---

JavaScript로 드래그 선택 차단하는 방법

자바스크립트로 드래그 선택을 막으려면, 다음과 같이 "selectstart" 이벤트를 차단하면 됩니다.

document.addEventListener('selectstart', function (event) {
    event.preventDefault();
});

또는, 다음과 같이 마우스 드래그 자체를 차단할 수도 있습니다.

document.addEventListener('mousedown', function (event) {
    event.preventDefault();
});

그러나 이 방법은 버튼 클릭, 입력 포커스까지 방해할 수 있어 추천하지 않습니다.

JavaScript로 특정 요소만 드래그 선택을 막으려면 다음과 같이 적용할 수 있습니다.

const target = document.getElementById('no_select');

target.addEventListener('selectstart', function (event) {
    event.preventDefault();
});

---

맺는말

다음과 같이 CSS로 마우스 드래그 선택을 막는 것이 가장 안정적이고 유지보수에 좋습니다.

.no_select {
    user-select: none;
}

<div class="no_select">
    <!-- 보호할 콘텐츠 -->
</div>

반면에 자바스크립트를 주로 이용해야할 경우는 다음과 같습니다.

• iframe 내부 제어
• 드래그 이벤트 기반 UI 구현
• 특정 상황에서만 동적으로 차단/허용 전환