Question

我试图让我的滑块可拖动，例如，如果我有3个选项：

0 --- | --- ---ö|| - O

我希望滑块手柄能够捕捉到最接近的选项，例如你在|之间释放鼠标键＆安培; ||在上面的例子中，它应该自动转到中间＆＃34; o＆＃34;。所以，更不用说它是否在|之前的任何地方发布，它是第一个＆＃34; o＆＃34;到最后＆＃34; o＆＃34;如果在||后发布。我编写了一个代码并将jQuery UI Draggable添加到滑块中，但是我很难找到一个解决方案来捕捉到最接近的选项。

请注意，选项是动态的，因此可以是任意数字：

0 --- | - O

0 --- | --- ---ö|| - O --- --- |||ø--- --- ||||Ø

这就是我写的只为两个选项做同样的事情：

///slider Stuff
     $(function() {
    var select = $( "#select" );
    var $max = $('#select').find('option').length;
    if ($max > 1){
    var slider = $( "<div id='slider'></div>" ).insertAfter( select ).slider({
      min: 1,
      max: $max,
      step:1,
      animate: 'true',
      range: "min",
      value: select[ 0 ].selectedIndex + 1,
       slide: function(event, ui) {
            $('#select').trigger('change'); ///trigger change event for the dropdown menu.
            select[ 0 ].selectedIndex = ui.value - 1;
          }
    });


//Draggable Stuff
    $("#slider .ui-slider-handle").draggable({
                          animate: true,
                          step: 1,
                          axis: "x",
                          containment: "parent",
                                 });

    ////Making the draggable function work if mouse is released outside of the handle by adding mouseup event to body

    $("#slider .ui-slider-handle").mousedown(function(){
     $('body').one('mouseup', function() {
    var sliderleft = $('#wwslider .ui-slider-handle').css('left').replace(/[^-\d\.]/g, '');
    ///here I tried to get the percentage of slider's position
    $sliderwidth = $("#slider").css('width').replace(/[^-\d\.]/g, '');;
    $sliderleft = $("#slider .ui-slider-handle").css('left').replace(/[^-\d\.]/g, '');;
    $max = $('#select').find('option').length;
    $selectvalue =  $('#select').val();
    $slidervalue = $("#slider").slider('value');
    $sliderpercent = ($sliderleft/$sliderwidth)*100;
    console.log($sliderpercent);

///Okay, here is what I did for two options, If it is released at some percent lower than a certain amount, set value to 1, else set it to two, But now I want to be able to do it automatically with any number of options.    
    if($sliderpercent <= 33.3) {
    $("#slider").slider('value',1);
    $('#select').trigger('change');
    }
    else {
    $("#slider").slider('value',2);
    $('#select').trigger('change');
    }
                                           });
                                                  });
    //Draggable
    $( "#select" ).change(function() {
      slider.slider( "value", this.selectedIndex + 1 );
      var $currentscs = $('#select').find(":selected").text();
     $('#holder li').fadeOut('fast');
     $('#holder li[data-scs-id*='+$currentscs+']').fadeIn('fast');
    });
    }
  });

为了更好地理解，这里是The Fiddle

正如你在小提琴中看到的那样，如果你从下拉列表中选择一个选项，一切都很完美，显示的是各个li，滑块移动到它的正确位置， 我想要的是是让它也适用于滑块，如果移动滑块，我希望在下拉列表中选择最接近的值来释放滑块点。希望它足够清楚。对此的任何帮助都将受到高度赞赏。

更新

有关详细说明，请查看绑定到＆＃34; <Select>＆＃34;的jQuery UI滑块的this默认功能。我想我想要的已经存在，我只需要一些帮助来弄清楚如何使用它：正如您所看到的，当您单击选项2附近的某个位置时，它会转到选项2并在下拉列表中选择它，如果您单击滑块中的任意位置，它会转到最近的选项，我希望拖动时发生完全相同的事情，所以当你拖动滑块，释放它的那一刻，滑块应该到释放点的最近选项。

Answer 1

如果我理解你是对的，那么你首先尝试完成的是滑块和选择元素之间的双向通信？

使用widget工厂扩展滑块并将手柄转换为可拖动的可能解决方案： fiddle

$.widget("ui.dragSlider", $.ui.slider, {
    _create: function () {
        this._super('_create');
        var drWidth = this.element.context.clientWidth;
        var drMax = this.options.max - this.options.min;
        var drStep = drWidth / drMax;
        var perc = drStep / drWidth;
        // turn handle into draggable widget
        this._handleDraggable(this.handle, drWidth, drMax);
        // add a basic ruler to the slider 
        this._addVisuals(drMax, drStep);
    },
    // setup handle as a draggable object
    // wire up draggable event handlers with slider event handlers
    _handleDraggable: function ($handle, drWidth, drMax) {
        var that = this;
        $handle.draggable({
            animate: true,
            axis: "x",
            containment: "parent",
            drag: function (event, ui) {
                // trigger slide event on drag
                that._trigger("slide", event, ui);
            },
            stop: function (event, ui) {
                // calculate percentage of handle's position relative to
                // the slider width
                var posPer = Math.round(ui.position.left / drWidth * 100);
                // calculate value for the slider based on handles position
                var sliderPos = (posPer / 100 * drMax) + that.options.min;
                // set new value(will trigger change event)
                that._setOption("value", sliderPos);
                // trigger slider's stop event
                that._trigger("stop", "slidestop", ui);
            }
        });

    },
    // add a "basic ruler"
    _addVisuals: function (drMax, drStep) {
        for (var i = 0; i <= drMax; i++) {
            if (i == 0) {
                $("#value").append("<span>|</span>");
            } else {
                $("#value").append("<span style='padding-left:" + (drStep - 3) + "px'>|" + "</span>");
            }
        }

    },
});
// implementation of custom slider 
$(document).ready(function () {
    $("#dragSlider").dragSlider({
        min: 1,
        max: 5,
        animate: true,
        slide: function (event, ui) {
            $("#location").html(ui.position.left);
        },
        change: function (event, ui) {
            $("#select").val(ui.value);
        },
    });
    $("#select").change(function (e) {
        $("#dragSlider").dragSlider("value", $(this).val());
    });

});

jQuery UI Slider Draggable

为了更好地理解，这里是The Fiddle

更新

1 个答案: