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);

Fiddle