jQuery UI slider 可拖动

Question

我正在尝试使我的 slider 可拖动，例如，如果我有 3 个选项:

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

我希望 slider handle 能够捕捉到最接近的可能选项，因此例如您在 | 之间释放鼠标键&||在上面的示例中，它应该自动转到中间的“o”。所以，更不用说之前是否在任何地方发布过 | ，如果在 || 之后释放，它将转到第一个“o”并转到最后一个“o”。我编写了一段代码，并向 slider 添加了 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

正如您在 fiddle 中看到的，如果您从下拉列表中选择一个选项，一切都很完美，会显示相应的 li 并且 slider 会移动到正确的位置，我想要的是让它也可以与 slider 一起使用，如果您移动 slider ，我希望在下拉列表中选择距离 slider 释放点最近的值。希望它足够清楚。对此的任何帮助将不胜感激。

更新:

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

Answer 1

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

使用小部件工厂来扩展 slider 并将 handle 变成可拖动的可能解决方案: 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());
    });

});