Вопрос по jquery – jQuery UI Slider - отключить скольжение на дорожке / включить ручку mousedown

2

У меня есть jQuery UI Slider, который я хочу отключить, когда пользователь пытается скользить по дорожке. Он должен работать / включаться только тогда, когда кто-то тянет за ручку Нажатие и попытка перетащить скольжение для перемещения ручки должны быть отключены. Я не уверен, что это можно сделать с помощьюunbind илиmousedown мероприятие

Проблема, которую я замечаю, состоит в том, что моя ручка переходит от 1 до 100. Когда вы перемещаете начало ручки, она отображает использованиеui.value. Но если вы попытаетесь выйти за пределы ручки и скользить по дорожке ползунка, символui.value сбрасывает свое значение.

Итак, я хочу отключить перетаскивание без ручек.

ты можешь показать нам демо здесь Jsfiddle.net чтобы мы могли понять, потому что я немного запуталась в твоем вопросе. coder

Ваш Ответ

5   ответов
0

и я не мог найти никакого решения, пока не решил удалить дескриптор из самого jquery ui

Вui.slider.js, Прокомментируйте эти строки.

// Bind the click to the slider itself
this.element.bind('mousedown.slider', function(e) {
   self.click.apply(self, [e]);
   self.currentHandle.data("mouse").trigger(e);
   self.firstValue = self.firstValue + 1; //This is for always triggering the change event
});
0

jQuery UI Slider - Отключить щелчок по дорожке слайдера

function disableSliderTrack($slider){

    $slider.bind("mousedown", function(event){

        return isTouchInSliderHandle($(this), event);   

    });

    $slider.bind("touchstart", function(event){

        return isTouchInSliderHandle($(this), event.originalEvent.touches[0]);

    });
}

function isTouchInSliderHandle($slider, coords){

    var x = coords.pageX;
    var y = coords.pageY;

    var $handle = $slider.find(".ui-slider-handle");

    var left = $handle.offset().left;
    var right = (left + $handle.outerWidth());
    var top = $handle.offset().top;
    var bottom = (top + $handle.outerHeight());

    return (x >= left && x <= right && y >= top && y <= bottom);    
}


disableSliderTrack($(".ui-slider"));
1
  $("#range-amount").slider({ disabled: true });
1

Это 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 селектор.

-1

вы не хотите, чтобы ползунок скользил по событиям мыши, это должно сработать:

$( "#slider" ).mousedown(function(){return false;}); // For mousedown
$( "#slider" ).scroll(function(){return false;}); // For scrolling with the trackpad

Также проверьте список событий jquery и просто замените любое событие, чтобы удалить это событие из ползунка, например:

$( "#slider" ).someEvent(function(){return false;});

Чтобы удалить все события из слайдера, попробуйте:

$('#slider').unbind();
Отлично, все, что вам нужно сделать, это удалить все события из ползунка и работать только с событиями в ручке ползунка :), я обновил ответ, чтобы показать это Joshua Kissoon
Спасибо ... это то, что я пытаюсь сделать. Но ползунок следует перемещать / включать только при использовании ручки ползунка. Все, что находится за пределами дескриптора, должно быть отключено. user1324638

Похожие вопросы