[css-real] 드래그(drag) 막기

드래그 방지된 영역입니다 :)

드래그를 방지하기 위해서는, <body>에 아래 css 코드를 적용해야한다.

맨 위와 같이 특정영역에 지정할 수도 있지만, 타 영역이 드래그 가능하다면, 타 영역에서 포커스를 두고 긁으면, 보기에는 드래그가 안된것처럼 보이지만 이를 복사(ctrl + c)하여 메모장에 붙여넣어보면, 해당 영역이 드래그 되었음을 확인할 수 있다.

/* css에 삽입하는 방법 */
body {
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none
}

<!-- css에 삽입하는 방법 -->
<body style="-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none">
	<!-- content 내용 -->
</body>

일부 영역에서는 드래그를 허용하고 싶다면, body에 드래그 방지 코드를 넣어놓고, 원하는 영역에 아래 코드를 삽입한다.

.draggable {
  -webkit-user-select:all;
  -moz-user-select:all;
  -ms-user-select:all;
  user-select:all
}

텍스트만 드래그를 허용하고 싶을 경우:

.draggable {
  -webkit-user-select:text;
  -moz-user-select:text;
  -ms-user-select:text;
  user-select:text
}

좋아요공감

저작자표시비영리동일조건

'css' 카테고리의 다른 글

[css] 선택자1 - Attribute Selector 속성 선택자 (0)	2021.03.20
[css-real] 웹접근성을 고려한 .blind(hidden) 처리 (0)	2021.01.20
[css] <table> 기본 정리 (0)	2021.01.20
[css-real] 드래그(drag) 막기 (0)	2021.01.11
[css-real] 형광펜으로 표시한 듯 효과주기 (0)	2021.01.10
[css-real]: 한줄, 또는 여러줄의 말줄임(...) 처리 방법1 (0)	2021.01.10

저작자표시 비영리 동일조건

'css > e.g.' 카테고리의 다른 글

[PC] Gradient Doughnut 1 (0)	2021.09.24
[PC/MO] Pie Chart (0)	2021.09.24
[css-real] 웹접근성을 고려한 .blind(hidden) 처리 (0)	2021.01.20
[css-real] 형광펜으로 표시한 듯 효과주기 (0)	2021.01.10
[css-real]: 한줄, 또는 여러줄의 말줄임(...) 처리 방법1 (0)	2021.01.10