me

[css/js] 스와이프 환경에서 텍스트 드래그 풀기 및 막기
2024.02.02 / ,

스와이프 환경에서 텍스트 드래그 풀기 및 막기 기능에 대한 코드를 작성하려 한다.

반응형으로 제작된 HTML에서 기존에 텍스트 드래그 방지를 위해서 코드가 있었는데, 이번엔 드래그될 수 있도록 요청이 왔음.

모바일에서는 단순하게 텍스트 드래그 방지 코드만 지우면 되는데

*:not(#id_search) {-webkit-touch-callout:none; -webkit-touch-select:none; -ms-user-select:none; -moz-user-select:none; -webkit-user-select:none; -user-select:none; -webkit-tap-highlight-color:rgba(0,0,0,0)}
body {-webkit-overflow-scrolling:touch;}

정작 저 코드를 지워도 PC에서는 마우스 스와이프 때문에 텍스트 드래그 감지가 안 되는 현상.

user-select: text;

위 코드를 써보란 이야기도 있던데 어느 곳에 적용해도 PC 스와이프 내 본문 텍스트는 긁어지지 않음

user-select: auto | all | none | text;

브라우저에서 드래그나 더블 클릭을 사용한 텍스트 선택을 막을 때 사용한다고 함

auto : Default 값으로 브라우저 허용 시 텍스트 선택 가능
all : 더블클릭이 아닌 클릭만으로도 선택이 가능
none : 텍스트 선택 안 됨
text : 텍스트 선택이 가능

-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

스와이프 환경에서 텍스트 드래그 풀기 및 막기 코드

바보와 같이 이리저리 다 해보다가…. 정말 단순한 방법으로 결론을;;;

어차피 이번 의뢰는 특정 상황에서만 텍스트를 긁어 올 예정이기에…. 스와이프 기능 파괴를 하는 게 가장 깔끔했음.

$(document).on('keydown', function(e) {
    if (e.key === 'F4') {
        e.preventDefault();
        $("#wrapper").off();
    }
});

스와이프에 사용한 플러그인 : https://github.com/dohoons/jquery.touchSlider?tab=readme-ov-file

스와이프 환경에서 텍스트 드래그 풀기 및 막기

기타 css 글 : https://pixiclue.com/tag/css/

« HTML POSTS »