Как заставить этот слайдер управлять работой в обоих направлениях?

Question

Как заставить этот слайдер управлять работой в обоих направлениях?

0

Я пытаюсь сделать слайдер диапазона, но он работает только в одном направлении (справа) и перетаскивается из родительского контейнера (#volume). Как я могу это исправить?

Я добавил ссылку на демонстрационную скрипту.

наценка

<div id="volume">
    <div class="progress">
        <div class="volumeslider"></div>
    </div>
</div>

CSS

#volume{
    width:300px;
    background: #ddd;
    cursor:pointer;
}
.progress{
    height:10px;
    background:#999;
    position:relative;
    width:0;
}
.volumeslider {
    background: #808080;
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 15px;
    right: -10px;
    top: -5px;
}

JS

$('.volumeslider').bind('mousedown', function(e){
    $('.volumeslider').bind('mousemove', function(e){
        $('.progress').width(e.pageX - $('.progress').offset().left + 'px');
        $(this).css('left', e.pageX - ($(this).width()/2) );
    });
    $('.volumeslider').bind('mouseup',function(){
        $('.volumeslider').unbind('mousemove');
    });
});

JS Fiddle: http://jsfiddle.net/2mYm7/

Rajender Joshi 06 май 2014, в 11:44

Источник

Теги:

javascript

jquery

html

css

2 ответа

2

Вы не учли прописку, которую вы передали элементу тела. Я внесла некоторые изменения в код.

  $('.volumeslider').bind('mousedown', function (e) {
      console.log('binded');
    $('.volumeslider').bind('mouseup', function (e) {
        console.log('unbinded');
       $('.volumeslider').unbind('mousemove');
    });
    $('.volumeslider').bind('mousemove', function (e) {
      console.log('mousemove');
      $('.progress').width(e.pageX -  $('.progress').offset().left + 'px');
      $(this).css('left', e.pageX - 25- $(this).width());
    });

 });

Проверьте этот jsFiddle http://jsfiddle.net/2mYm7/1/

SSS 06 май 2014, в 07:04

0

Вы можете удалить операторы консоли после завершения отладки. А также для каких целей вы используете этот слайдер? У вас также есть слайдер jquery-ui. С четко определенными функциями jqueryui.com/slider
SSS 06 май 2014, в 09:39

Ещё вопросы

Вы можете удалить операторы консоли после завершения отладки. А также для каких целей вы используете этот слайдер? У вас также есть слайдер jquery-ui. С четко определенными функциями jqueryui.com/slider

Wolph · Accepted Answer · 2014-05-06T08-25-00.000Z

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

Он включает в себя пограничные проверки и гарантирует, что тело достаточно велико, чтобы он не перетаскивал куда угодно на странице.

http://jsfiddle.net/2mYm7/5/

var dragging = null;

function startDrag(){
    console.log('started dragging', this);
    var $this = $(this);
    dragging = $this;
    $(document.body).bind('mouseup', stopDrag);
    $(document.body).bind('mousemove', drag);
}

function stopDrag(){
    console.log('stopped dragging', dragging[0]);
    $(document.body).unbind('mouseup', stopDrag);
    $(document.body).unbind('mousemove', drag);
    dragging = null;
}

function drag(e){
    var slider = dragging;
    var progress = slider.parent();
    var container = progress.parent();
    var maxOffset = container.width();
    progress.width(Math.min(e.pageX - progress.offset().left, maxOffset) + 'px');
}

$('.volumeslider').bind('mousedown', startDrag);

Большое спасибо. Это именно то, чего я пытался достичь. Upvoted. :)