[HTML/CSS] 마우스 드래그 방지 - 모든 브라우저 호환

 게임 듀오 매칭 관련 프로젝트 중 포지션 선택 아이콘을 만들었다. 그런데 다음 사진처럼 아이콘이 드래그가 되어 보기 좋지 않다고 생각하여 드래그를 방지하는 방법을 찾아보았다. 결론은 간단한 CSS로 설정이 가능하다.

 

적용 전

 드래그 방지는 한번씩 사용할 일이 있을것 같아서 정리해두려고 한다.

 

.drag-prevent{
    -ms-user-select: none;
    -moz-user-select: -moz-none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    user-select: none;
}

적용 후

 드래그 방지 코드를 적용 한 모습이다. 드래그가 되지 않고 디자인 해놓은대로 체크박스 체크 및 호버링이 잘 된다. 편안하다.

 

 위와 같이 따로 ".drag-prevent"처럼 class로 설정해두고 사용하면 될 것이다.

 

 

드래그 가능하도록 하기

 관련 내용을 더 찾아보니 반대로 드래그를 일부 영역에서 허용하도록 할 경우도 있을 것 같았다.

/* 드래그 가능하도록 */
.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
}

※ 관련 내용의 출처는 이곳