3

スライダーをドラッグ可能にしようとしています。たとえば、3 つのオプションがある場合:

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

スライダー ハンドルを可能な限り最も近いオプションにスナップさせたいので、たとえば | の間でマウス キーを放します。& || 上記の例では、自動的に中央の「o」に移動する必要があります。というわけで、どこかで先行発売されるのは言うまでもありません | || の後に解放された場合は、最初の "o" と最後の "o" に移動します。コードを書き、jQuery UI Draggable をスライダーに追加しましたが、最も近いオプションにスナップするための解決策を見つけるのに苦労しています。

オプションは動的であるため、任意の数になることに注意してください。

o---|---o

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

これは、2 つのオプションに対してのみ同じことを行うために書いたものです。

///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が表示され、スライダーが正しい位置に 移動します.スライダーを動かした場合、スライダーでも動作するようにしたい. ,スライダーのリリースポイントに最も近い値をドロップダウンで選択できるようにしたい。それが十分に明確であることを願っています。これに関するヘルプは大歓迎です。

アップデート：

詳しくは、「 」にバインドされた jQuery UI スライダーのデフォルト機能をご覧ください<Select>。私が欲しいものはすでにそこにあると思います。それを使用する方法を理解するための助けが必要です:スライダー 、最も近いオプションに移動します。これとまったく同じことがドラッグで発生するようにしたいので、スライダーをドラッグすると、離した瞬間に、スライダーはリリースポイントに最も近いオプションに移動する必要があります。

4

1 に答える 1

0

あなたが正しいことを理解していれば、最初に達成しようとしているのは、スライダーと選択要素の間の双方向通信ですか?

ウィジェットファクトリを使用してスライダーを拡張し、ハンドルをドラッグ可能に変える可能な解決策: フィドル

$.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());
    });

});
于 2013-06-21T22:56:25.930 に答える