2014-01-20 30 views
1

正如標題所說,我用這個(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

感謝, 克里斯蒂安

+0

有在地圖上的div事件偵聽器,他們抓住鼠標點擊。我可以建議2個解決方案: 1. Js:製作一個按鈕(或點擊info div)將文本複製到緩衝區。 2.嘗試禁用這些偵聽器並添加默認值。 –

+0

http://stackoverflow.com/questions/1539641/how-to-copy-text-to-the-clients-clipboard-using-jquery – NoobEditor

回答

0

您可以通過重新啓用在底部連接頂部控制面板上的容器指針事件解決這個問題。這些被置爲none leaflet.css:

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

你需要在自己的自定義CSS來否決這個:

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

試了一下,沒有工作。我應該補充,當我開始選擇其他div時,我可以選擇它。如圖所示,如果我開始在顯示圖層的div上選擇,我可以選擇文本,但如果我嘗試直接從該div中選擇(在圖片的右上角),它會移動地圖。 我知道圖片剪得很小,希望它能提供所需的信息/視覺。 圖片:http://www.upload.ee/image/3839164/asd.PNG 謝謝回覆反正。 – Ajudoonor

+0

你可以提供JSFiddle或Plnkr嗎? – iH8

+0

不幸的是沒有。該項目包含我不允許分享的信息。 – Ajudoonor

4

使用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/

+0

這對我有用。此外,我不得不修改所有的CSS屬性後綴*** - 用戶選擇:無; ** –