javascript - 如何在悬停时用鼠标指针移动 div？

Question

<div class="moveAble" style="position: absolute;">
<div class="info"><img src="https://pbs.twimg.com/profile_images/1498221863/Jodis_Gifts_logo_hi_res_normal.jpg" alt="info" /></div>
</div>

$(document).ready(function(){
      $('div.moveAble').mousemove(function(e){
            var y = e.pageY;
            var x = e.pageX;
            $('div.moveAble').css({'top': y}); 
            $('div.moveAble').css({'left': x});

      });
    });

上面的代码不能正常工作，当我移动鼠标指针时，它只在底部和右侧移动，而不是顶部和左侧。而且div的移动也不顺畅。我该如何解决这个问题才能使其正常工作。

DEMO here

Answer 1

我想这就是你想要的效果http://jsfiddle.net/wUAGP/440/

$(document).ready(function(){
  var $moveable = $('.moveAble');
  $(document).mousemove(function(e){
      $moveable.css({'top': e.pageY,'left': e.pageX});
  });
});

感谢@nnnnnn提到 $moveable

的缓存