jQuery UI Slider - 禁用轨道上的滑动/启用手柄 mousedown [英] jQuery UI Slider - disable sliding on track/enable on handle mousedown

问题描述

我有一个 jQuery UI 滑块，当用户尝试使用轨道滑动时，我想禁用它.只有当有人将手柄拖到某处时，它才应该工作/启用.单击并尝试拖动滑动以移动手柄应该被禁用.我不确定这是否可以使用 unbind 或 mousedown 事件来完成.

I have a jQuery UI Slider, which I want to disable when a user tries to slide using the track. It should only work/enable when someone drags the handle somewhere. Clicking and trying to drag the sliding to move the handle should be disabled. I'm not sure if this can be done using unbind or mousedown event.

我注意到的问题是，我的句柄从 1 变为 100.当您移动句柄的开头时，它显示使用 ui.value.但是，如果您尝试超出手柄并在滑块轨道上滑动，ui.value 会重置其值.

The problem I notice is, my handle goes from 1 to 100. When you move the start of the handle, it displays uses the ui.value. But if you try to go outside the handle and slide on the slider track, the ui.value resets its value.

所以，我想禁用非手柄拖动.

So, I want to disable non-handle dragging.

推荐答案

这可以使用 2 行 css 代码完成！

This can be done useing 2 line css code!

这是 HTML

<div class="SliderContainer"><div id="BGS0"></div></div>

这是JS

$('#BGS0').slider();

这是 CSS

.SliderContainer {
   pointer-events: none;
   /* Other settings here */
}

.SliderContainer > .ui-slider .ui-slider-handle {
pointer-events: auto;
/* Other settings here */
}

注意:我使用 SliderContainer 类作为父 DIV，因为默认情况下，此 DIV 内的任何指针事件都被禁用.然后我只为滑块句柄启用了指针事件.只有父 DIV 中的滑块受此选项影响，因为我使用了 .SliderContainer >.ui-slider .ui-slider-handle 选择器.

NOTE: I used SliderContainer Class as a parent DIV, because any pointer event is disabled inside this DIV by default. Then I enabled pointer event for slider handle only. Only sliders inside parent DIV are affected by this option, because I used .SliderContainer > .ui-slider .ui-slider-handle selector.

这篇关于jQuery UI Slider - 禁用轨道上的滑动/启用手柄 mousedown的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！