我正在使用jQuery滑块,但我无法移动句柄。
HTML结构:
<div id="map" class="map" style="position: relative;">
<div id="legend" class="legend" style="position: absolute; top: 0px; right: 0px; width:300px; z-index: 100;">
<div style="width:290px; height: 150px; padding: 5px;">
<label class="checkbox-label"><input name="gai_max_V" id="gai_max_V" class="runoff" type="checkbox"><image src="icons/icona_land_use.png"/><p id="legend_text">Soil Runoff Capacity (1955)</p></input></label>
<div id="div-slider">
<input type="range" name="slider-1" id="slider-1" value="80" min="20" max="100" step="20" data-highlight="true">
</div>
<div style="width:290px; height: 150px; padding: 5px;">...</div>
<div style="width:290px; height: 150px; padding: 5px;">...</div>
</div>
</div>
jQuery移动版本是1.4.5,地图,即父div的内容由Leaflet创建:
var map = L.map('map', {
center: [45.81, 9.1],
zoom: 15
});
你能猜出为什么我不能移动手柄吗?
谢谢,
Eylul
答案 0 :(得分:1)
你可以用小css hack来解决这个问题。
演示:https://jsfiddle.net/u2j24x25/2/
<!-- Insert this part after MAP -->
<div id="div-slider"><input type="range" name="slider-1" id="slider-1" value="80" min="20" max="100" step="20" data-highlight="false"></div>
/* CSS */
#map { height: 380px; } #div-slider {z-index:99999999;border:1px solid red;} #div-slider {position:relative;top:-250px;width:300px;float:right}
编辑: 在div #map之后放置div#legend将解决这个问题。
演示:https://jsfiddle.net/u2j24x25/4/
<div id="map" class="map" style="position: relative;">
</div>
<div id="legend" class="legend" style="position: absolute; top: 0px; right: 0px; width:300px; z-index: 100;">
<div style="width:290px; height: 150px; padding: 5px;">
<label class="checkbox-label">
<input name="gai_max_V" id="gai_max_V" class="runoff" type="checkbox"><image src="icons/icona_land_use.png"/><p id="legend_text">Soil Runoff Capacity (1955)</p></input></label>
<div id="div-slider">
<input type="range" name="slider-1" id="slider-1" value="80" min="20" max="100" step="20" data-highlight="true">
</div>
<div style="width:290px; height: 150px; padding: 5px;">...</div>
<div style="width:290px; height: 150px; padding: 5px;">...</div>
</div>
</div>
/* CSS */
#map { height: 380px; }