-1

アイテムをスライダーにドロップできるjQueryスライダーを実装しようとしています。

アイテムのドロップは機能します。ただし、ハンドルはドロップポイントの位置にジャンプします。ここにフィドルがあります：

http://jsfiddle.net/aCLNH/

$(function () {

//the draggable object
$("#dragobject").draggable();

//Prepare the slider
var range = 100,
    sliderDiv = $("#slider");

// Activate the UI slider
sliderDiv.slider({
    min: 0,
    max: range,
});

// Number of tick marks on slider
var position = sliderDiv.position(),
    sliderWidth = sliderDiv.width(),
    minX = position.left,
    maxX = minX + sliderWidth,
    tickSize = sliderWidth / range;

//Set slider as droppable
sliderDiv.droppable({
    //on drop 
    drop: function (e, ui) {

        //If within the slider's width, follow it along
        if (e.pageX >= minX && e.pageX <= maxX) {

            var val = Math.round((e.pageX - minX) / tickSize);
            sliderDiv.slider("value", val);
            alert("My position is : " + val + "% !!");

            //do ajax update here to set the position
            /*$.ajax({
                type: "POST",
                url: url,
                data: val,
                success: function () {
                    //congrats
                },
                dataType: dataType
            });*/

        }
    }
});

});

ハンドルを元の位置に留めておきたいのですが。

4

1 に答える 1

1

スライダーの値を設定しないでください。次の行は削除する必要があります。

sliderDiv.slider("value", val);

フィドル

于 2013-03-09T05:24:44.030 に答える