jQuery Mobile - 滑块不能移动答案

【问题标题】：jQuery Mobile - slider cannot be movedjQuery Mobile - 滑块不能移动
【发布时间】：2016-02-05 16:37:18
【问题描述】：

我正在使用 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和map，也就是父div的内容是Leaflet创建的：

var map = L.map('map', {
  center: [45.81, 9.1],
  zoom: 15
});

你能猜到为什么我不能移动把手吗？

谢谢，

埃卢尔

【问题讨论】：

最好显示所有相关代码，例如：如何初始化滑块等...
其实就是这样，我只是把它放在html里面，然后我附上一个事件监听器，但我认为它不相关。顺便说一句，感谢您检查问题:)
无法重现，您可以在此处看到：imgur.com/ZebN41a 在 Plunker 上使用以下示例：embed.plnkr.co/oLMCHGlOOmzZWf1CclIh
你的例子在我的情况下不起作用@iH8

标签： javascript html css jquery-mobile leaflet

【解决方案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#legend 放在 div#map 之后将解决该问题。

演示：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; }

【讨论】：

感谢您的回答。我看到将滑块放在地图 div 之外是可行的。但是我需要当我滚动图例时，滑块与其他元素一起移动。最后，图例 div 中的每一层都会有一个滑块。有没有办法使这项工作？谢谢！
关闭地图div后尝试放置图例div。我会用新的演示更新答案。
谢谢，成功了！然后我还必须删除这些行： L.DomEvent.disableClickPropagation(L.DomUtil.get('legend')); L.DomEvent.disableScrollPropagation(L.DomUtil.get('legend'));
我没有在我的演示中使用这行代码，这就是为什么我不知道它们是什么的原因：）不客气。