선택 가능한 전단지에 div의 선택 불가능한 텍스트

Question

제목에 다음과 같이 사용했습니다. (Example) 특히 오른쪽 상단 모서리 (미국 인구 밀도)의 정보 상자를 사용했습니다. 나는 더 많은 정보를 onclick 등등에게 보여주기 위해 그것을 수정했다. 이제 나는 문제가있다.이 div는 선택이 불가능하다. 텍스트를 선택하는 대신 텍스트를 선택 (텍스트 복사 목적으로) 할 수 있어야합니다. 단지지도를 이동하기 만하면됩니다. 올바른 장소를 찾을 수 없기 때문에 "아주 쉬운 해결책"이 있습니까? 어쩌면 CSS에서 어쩌면?

.info { 
     position: fixed; 
     right: 0; 
     bottom: 23px; 
     padding: 6px 8px; 
     font: 14px/16px Arial, Helvetica, sans-serif; 
     background: white; 
     background: rgba(255,255,255,0.8); 
     box-shadow: 0 0 15px rgba(0,0,0,0.2); 
     border-radius: 5px; 
     /*-webkit-user-select: text; 
      -moz-user-select: text; 
       user-select: text; 
     -webkit-user-drag: text;*/ /*Tried this, didn't work. */ 

    } 
    .info h4 { 
     margin: 0 0 100px; 
     color: #777; 
    } 

편집 : 다른 div에서 선택을 시작하면 추가해야합니다. 그림에서 볼 수 있듯이 내 레이어가 표시된 div에서 선택을 시작하면 텍스트를 선택할 수 있지만 해당 div (그림의 오른쪽 상단 모서리에 있음)에서 직접 선택하려고하면 맵이 이동합니다. 나는 그림이 아주 작게 자른다는 것을 안다. 그것이 정보/비전을 제공하기를 희망한다. 사진 : http://www.upload.ee/image/3839164/asd.PNG

감사합니다, 크리스티안

Answer 1

당신은 최고 제어 컨테이너 욕실 바닥에 포인터 이벤트를 다시 활성화하여이 문제를 해결할 수 있습니다. 이들은 leaflet.css에 없음으로 설정 얻을 :

https://github.com/Leaflet/Leaflet/blob/master/dist/leaflet.css#L93

당신은 사용자 정의 CSS에서이를 번복해야합니다

.leaflet-top, 
.leaflet-bottom { 
    pointer-events: all; 
} 

Answer 2

사용 disableClickPropagation 당신의 컨트롤에서 onAdd 방법.

onAdd: function (map) { 
    var container = L.DomUtil.create('div', 'my-custom-control'); 
    container.innerHTML += 'This is an example using disableClickPropagation.'; 
    L.DomEvent.disableClickPropagation(container); 
    return container; 
} 

http://jsfiddle.net/9q756/1/