티스토리 드래그 방지 원하는 부분만 적용

Posted by ironmask84
2017. 8. 14. 17:37 블로깅/블로그 팁



티스토리 뿐만 아니라 어떤 블로그라도 운영하다보면 자신이 열심히 작성해서 올린 글이

출처도 밝히지 않고 막 퍼가는 것이 불쾌할 수 있습니다.

사실 마음먹고 펌방지해제 Tool이나 웹브라우져의 소스보기 기능을 이용하면 다 뚫긴 할 수 있습니다만은,

퍼가려는 이에게 좀 더 번거롭게 만들 수 있는 효과는 있습니다. :)




이를 방지하고자, 티스토리 플러그인에는 아래와 같이 스팸,불펌방지라는 플러그인이 제공됩니다.

이 녀석을 적용하면, 관리자를 제외하고는 모든 블로그 영역이 드래그가 허용되지 않습니다.


저도 이 플러그인을 사용해오긴 했었는데..

어떤 자료는 드래그를 허용하고 싶은 것들이 생겼습니다..

주로 소스코드인 경우인데요.

특정 영역만 드래그를 허용하고자 알아보다가 직접 CSS를 건드려서 해결할 수 있었습니다.

다만, 플러그인의 장점인 관리자인 경우는 모든 영역 드래그 하기는 안됩니다. ^^;

그래도 관리자면, 편집 모드로 가서는 충분히 드래그가 되니까 뭐 ^%^


적용할 CSS 코드는 아래와 같아요~~
티스토리에서 html과 CSS 수정이 가능하신건 아시죠? ㅎㅎ
아래 코드를 추가해 주시면 됩니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

/* 우선 모든 부분을 막아놓고.. */
{
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
/* 태그의 id가 opensource인 녀석은 허용 */
#opensource *{
    -moz-user-select: text;
    -webkit-user-select: text;
    -ms-user-select: text;
    user-select: text;
}


그리고 위의 코드를 드래그 가능한 영역으로 설정하기 위해

아래와 같이 <div> 태그 혹은 <p>, <span> 태그와 같이 영역을 구분하는 태그로 

드래그를 허용할 영역을 감싸고 id를 위에 설정한 "opensource"로 부여하면 됩니다.

아래 예시는 현재 글을 html 로 표시했을 때 입니다~~ ㅎㅎ