爲什麼這個拖放模擬不起作用？

Question

html和css應該看起來像這樣： 當然還有最新jQuery庫的引用 jsfiddle link 問題是爲什麼mousemove事件不會關閉？

<style> 
#ball{ 
    position : absolute; 
    padding : 0px; 
    top:0px; 
}​ 
</style> 
<img id="ball" src="http://javascript.info/files/tutorial/browser/events/ball.gif"/> 
<div id="debug"></div>​ 




<script> 
     var xp = 0, 
      yp = 0; 
    > when mouse is down we start listen to mousemove 
     $(document).on("mousedown", "#ball", function(e) { 
      $(document).on("mousemove", this, function(e) { 
       mouseX = e.pageX - 20; 
       mouseY = e.pageY - 20; 
       xp += (mouseX - xp)/22; 
       yp += (mouseY - yp)/22; 
       $("#ball").css({ 
        left: xp, 
        top: yp 
       }); 
    > when mouse is up we stop listen to mouse move 
      }).on("mouseup", "#ball", function(e) { 
       $(document).off("mousemove",this, function(e) { 
       }); 
      }) 
     })​ 
</script> 

Answer 1

var xp = 0, 
    yp = 0; 
var dragging = false; 
$("#ball").on("mousedown", function(e) { 
    dragging = true; 
    $(document).on("mousemove", this, function(e) { 
     if(dragging) { 
      mouseX = e.pageX - 20; 
      mouseY = e.pageY - 20; 
      xp += (mouseX - xp)/12; 
      yp += (mouseY - yp)/12; 
      $("#ball").css({ 
       left: xp, 
       top: yp 
      }); 
     } 
    }); 
    $(document).on("mouseup", function(e) { 
     dragging = false; 
     $(document).off("mousemove",this, function(e) { 
      alert(e.pageX) 
     }); 
    }); 

});