CSS 텍스트 드래그 방지

웹브라우저에서 내가 만든 웹페이지의 글 내용을 드래그 못 하게 하는 방법.

간단하게 CSS로 처리할 수 있다.

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

브라우저 별로 다 막아준다.

 

일부 영역에서는 드래그를 허용하고 싶으면, 위의 코드를 body 영역에 기본으로 넣어주고, 원하는 영역에 아래 코드를 적용한다.

.allow-to-drag {
  -webkit-user-select:all;
  -moz-user-select:all;
  -ms-user-select:all;
  user-select:all
}

텍스트만 드래그를 허용하고 싶을 때,

.allow-to-drag-text {
  -webkit-user-select:text;
  -moz-user-select:text;
  -ms-user-select:text;
  user-select:text
}

이게 꼭 드래그 방지도 되지만, 웹사이트 내에서 텍스트에 커서가 올라갈 때마다 커서가 변하지 않도록 사용자 경험을 높일 수도 있다.