jQuery UI Slider可拖动 [英] jQuery UI Slider Draggable

问题描述

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

I'm trying to make my slider draggable , So for example if I have 3 options:

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

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

我希望将滑块手柄捕捉到最接近的可能选项，例如，您可以在| |之间释放鼠标键. & ||在上面的示例中，它应该自动转到中间的"o". 因此，更不用说它是否在| | |之前的任何位置发布. ，如果在||之后释放，则转到第一个"o"，最后一个"o". 我编写了代码，并向滑块添加了jQuery UI Draggable，但是我很难找到一种解决方案以使其捕捉到最接近的选项.

I want the slider handle to snap to closest possible option, so for example you release the mouse key between | & || in above example, it should automatically go to the middle "o". So, not to mention if it is released at any place before | , it goes to first"o" and to the last "o" if released after ||. I wrote a code and I added jQuery UI Draggable to the slider, But I have difficulty finding a solution for it to snap to the closest option.

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

Please note that Options are dynamic so it can be any number:

o --- | --- o

o---|---o

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

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

这是我写的只对两个选项执行相同操作的内容:

This is what I wrote to do the same thing for two options only:

///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');
    });
    }
  });

为了更好地理解，这是小提琴

就像在小提琴中看到的那样，如果您从下拉列表中选择一个选项，那么一切都将是完美的，将显示相应的li并将滑块移动到正确的位置， 我想要的是也要使其与滑块一起使用，如果您移动滑块，则希望在下拉列表中选择最接近滑块释放点的值. 希望它足够清楚. 在这方面的任何帮助将不胜感激.

For Better Understanding, Here is The Fiddle

As you can see in the fiddle, If you select an option from dropdown list, everything is perfect, Respective li is shown and slider moves to it's correct position, What I want is to Make it work with slider too, if you move the slider ,I want the nearest value to release point of slider to be selected in dropdown. Hope it is clear enough. Any help on this would be highly appreciated.

有关更多信息，请查看此 jQuery UI滑块的默认功能，该默认功能绑定到"<Select>". 我想我想要的东西已经存在，我只需要一些帮助来弄清楚如何使用它: 如您所见，当您单击选项2附近的某个位置时，它会转到选项2并在下拉菜单中选择它，如果您单击滑块中的任何位置，它将转到最近的选项，我希望拖动时发生同样的事情，所以当拖动滑块后，释放滑块时，滑块应移至离释放点最近的位置.

For more clarification, Please have a look at this default functionality of jQuery UI slider bound to "<Select>". I think What I want is already there, I just need some help figuring out how to use it: As you can see, when you click somewhere near option 2 it goes to option 2 and selects it in dropdown, if you click anywhere in the slider , it goes to nearest option, I want this exact same thing to happen with dragging, so when you drag the slider, the moment you release it, the slider should go to nearest option to the releasing point.

推荐答案

如果我理解您的理解正确，那么您首先要完成的工作是滑块和select元素之间的双向通信?

If i understand you correct, what you try to accomplish in the first place is a two-way communication between the slider and the select element?

使用小部件工厂扩展滑块并将手柄变成可拖动控件的可能解决方案: 小提琴

A possible solution using widget factory to extend the slider and turn the handle into a draggable: 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可拖动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！