jQuery滑块手柄在drop事件上移动

时间:2013-03-09 05:21:21

标签: jquery user-interface drag-and-drop slider

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

        }
    }
});

});

我希望把手留在原来的位置。

1 个答案:

答案 0 :(得分:1)

不要设置滑块值。该行应删除:

sliderDiv.slider("value", val);

Fiddle