2013-03-09 48 views
-1

我試圖實現一個jQuery滑塊,您可以將一個項目拖放到滑塊上。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

請勿設置滑塊值。此行應被刪除:

sliderDiv.slider("value", val); 

Fiddle