jQuery slider handle moves on drop event

Question

I'm trying to implement a jQuery slider where you can drop an item onto the slider.

Dropping an item works. However the handle jumps to the location of the drop point. Here is a fiddle:

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

        }
    }
});

});

I would like the handle to stay in its original location.

Answer 1

Don't set the slider value. This line should be removed:

sliderDiv.slider("value", val);

Fiddle