title: jQuery slider handle moves on drop event
body: <p>I'm trying to implement a jQuery slider where you can drop an item onto the slider.</p>
  
  <p>Dropping an item works. However the handle jumps to the location of the drop point. Here is a fiddle:</p>
  
  <p><a href="http://jsfiddle.net/aCLNH/" rel="nofollow">http://jsfiddle.net/aCLNH/</a></p>
  
  <pre><code>$(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 &gt;= minX &amp;&amp; e.pageX &lt;= 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
              });*/
  
          }
      }
  });
  
  });
  </code></pre>
  
  <p>I would like the handle to stay in its original location.</p>