jQuery滑动条句柄在放置事件时移动

Question

我正在尝试实现一个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
            });*/
        }
    }
});
});

我希望句柄保持在原来的位置。

Answer 1

不要设置滑动条的值。这一行应该删除:

sliderDiv.slider("value", val);

小提琴