jQuery UI 滑块可拖动

Question

我正在尝试使我的滑块可拖动，例如，如果我有 3 个选项：

o---|---o---||---o

我希望滑块手柄捕捉到最接近的可能选项，例如，您在 | 之间释放鼠标键& ||在上面的例子中，它应该自动转到中间的“o”。 所以，更别说之前有没有在任何地方发布过 | , 如果在 || 之后释放，它会转到第一个“o”和最后一个“o”。 我写了一个代码，并将 jQuery UI Draggable 添加到滑块，但我很难找到一个解决方案让它捕捉到最接近的选项。

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

o---|---o

o---|---o---||---o---|||---o---||||---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 并且滑块移动到正确的位置， 我想要的是让它也与滑块一起工作，如果你移动滑块，我希望在下拉列表中选择最接近滑块释放点的值。 希望它足够清楚。 对此的任何帮助将不胜感激。

更新：

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

Answer 1

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

使用小部件工厂扩展滑块并将手柄变成可拖动的可能解决方案： 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());
    });

});