jQuery UI Slider-禁用在轨道上滑动/在鼠标按下时启用 [英] jQuery UI Slider - disable sliding on track/enable on handle mousedown

问题描述

我有一个jQuery UI Slider，当用户尝试使用轨道滑动时我想禁用它.仅当有人将手柄拖到某处时，它才应该工作/启用.单击并尝试拖动滑块以移动手柄，应该被禁用.我不确定是否可以使用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中禁用了任何指针事件.然后，我仅为滑块句柄启用了指针事件.因为我使用了.SliderContainer > .ui-slider .ui-slider-handle选择器，所以只有父DIV内部的滑块受此选项的影响.

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-禁用在轨道上滑动/在鼠标按下时启用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！