jQuery双滑块处理重叠

Question

我正在尝试修改 jQuery 双滑块。除了一件事，一切都很好。然后 2 个手柄在同一位置，在最后一次移动期间未激活的手柄不能再拖动，除非您将另一个手柄移动到不同的位置。这是一个例子：

http://author.euro.confirmit.com/extwix/extquicktest_p564156043.aspx?__qtkey=9cffc015a10443a6ac0706c1abb41324&l=9

因此，如果您先尝试移动下手柄，则不能，否则您将移动上手柄。

我的代码如下：

<div style='width: 510px; text-align: right; color: #000000; margin-top: 50px;'> 100 </div>
<div id='rail'> </div>
<div style='width: 500px; text-align: left; color: #000000; margin-bottom: 50px;'> 0 </div>

$( '#rail' ).slider({
      range: true,
      min: 0,
      max: 100,
      values: [ 50, 50 ],
      slide: function( event, ui ){  
          $('#upper_result').html(ui.values[0]); 
          $('#q160_1').val(ui.values[0]); 
          $('#lower_result').html(ui.values[1]); 
          $('#q160_2').val(ui.values[1]);
      }
 });

var lower = document.getElementById('rail').getElementsByTagName('a')[1];
var upper = document.getElementById('rail').getElementsByTagName('a')[0];

lower.style.cssText="left: 250px; top: 35px; background: url('http://media.jts-mr.com/CustomeQuestions/Classic Slider/lower_thumb.gif')";
lower.innerHTML = "<div class='result' id='lower_result' style='position: absolute; top: 22px;'>" + $( '#rail' ).slider( 'values', 1 ) + "</div>";
upper.innerHTML = "<div class='result' id='upper_result' style='position: absolute; top: -20px;'>" + $( '#rail' ).slider( 'values', 0 ) + "</div>";

我该如何修复这个错误？

Answer 1

这似乎是一个 jquery 实现选择而不是一个错误。

如果您真的想改变这种行为，可以通过以下任一方式解决：

• 检查用户是否在中心线上方或下方拖动，并相应地更改顶部或底部滑块值。
• 检查拖动方向是向左还是向右，然后将顶部或底部滑块标记为活动滑块。