jQuery UI Range Slider - перемещайте правый перетаскиватель (дескриптор) при нажатии в середине ползунка - PullRequest
Новая
       12

jQuery UI Range Slider - перемещайте правый перетаскиватель (дескриптор) при нажатии в середине ползунка

0 голосов
/ 15 февраля 2012

Я использую ползунок диапазона jQueryUI следующим образом: 

$(function() {
    $( "#slider-range" ).slider({
        range: true,
        min: 0,
        max: 4,
        step: 1,
        values: [ 0, 4 ],
        slide: function( event, ui ) {
            $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
        }
    });
    $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
        " - $" + $( "#slider-range" ).slider( "values", 1 ) );
});

Что мне нужно сделать, это - переместить правый боковой перетаскиватель (ручку) в положение щелчка, когда вы нажимаете в середине ползунка. В настоящее время, когда вы нажимаете в середине, левый перетаскиватель (ручка) перетаскивается в эту позицию. Есть ли способ, которым я могу поменять это поведение?

Спасибо за помощь!

Ответы [ 2 ]

1 голос
/ 06 июля 2016

Я знаю, что это старый вопрос, но я столкнулся с той же проблемой и нашел более простой способ справиться с этим. По сути, вам нужно отключить события указателя на самом слайдере, включить их на маркерах, а затем прикрепить событие «click» к элементу контейнера, который вручную перемещает ваш слайдер. Вот шаги:

Примите этот HTML: 

<div class="container-outer">
   <div class="container-inner">
     <div class="jquerySlider">
     </div>
   </div>
</div>

CSS хотел бы это: 

.container-inner {
pointer-events: none;
}

.container-inner .ui-slider .ui-slider-handle {
    pointer-events: auto;
}

Ваш javascript будет выглядеть так: 

'click .container-outer': function(event) {
   event.preventDefault();
   var clickPosition = event.offsetX;
   var clickPercentage = event.offsetX / event.currentTarget.offsetWidth;
   var sliderMax = $('.jquerySlider').slider("option","max");
   var newPosition = sliderMax * clickPercentage;
   $('.jquerySlider').("values",1,newPosition);
}

Достоинством является то, что вы избегаете возиться с кодом jquery. Кроме того, события на самих ручках по-прежнему функционируют нормально.

Недостатком является то, что вы должны обрабатывать щелчки слайдера самостоятельно, вручную. Но, как показано выше, это не так сложно сделать.

В любом случае, надеюсь, что это полезно для других, сталкивающихся с этой проблемой.

1 голос
/ 15 февраля 2012

На самом деле это не так, хотя может показаться, что так.Он на самом деле определяет, какой дескриптор является ближайшим, и выбирает этот.Каждый раз, когда вы нажимаете, рассчитывается расстояние от ОБА до маркеров в пикселях.Проще увидеть функциональность с диапазоном MORE, посмотрите эту скрипту, которую я сделал: http://jsfiddle.net/gm5nm/

Вот функция, которую использует jQueryUI: 

this.handles.each(function( i ) {
var thisDistance = Math.abs( normValue - self.values(i) );
if ( distance > thisDistance ) {
distance = thisDistance;
closestHandle = $( this );
index = i;
}
});

source: Строка 249 из jquery.ui.slider.js

В общем, я думаю, что это можно использовать.Правильно переопределить это может быть немного сложно, потому что это внутри анонимной функции внутри другого метода, который содержит кучу логики.Вы МОЖЕТЕ, и я действительно действительно не рекомендую это, но вы МОЖЕТЕ изменить источник и просто установить ближайший дескриптор на 2-й.А если серьезно, не делай этого.Это очень плохой привычка.

...