Question

我正在尝试制作一个范围滑块，但它只在单向（向右）工作并拖出父容器（#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小提琴： http://jsfiddle.net/2mYm7/

Answer 1

你没有考虑到你给身体元素的填充。我对代码做了一些更改。

  $('.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/

Answer 2

以下是如何使其始终无处不在的示例。现在，如果你离开元素，它将永远拖延。

它包括边框检查，并确保正文足够大，以便停止在页面上的任何位置拖动。

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);

如何使这个滑块控件在两个方向上工作？

2 个答案: