使用mouery函数跟随div使用mousedown，mousemove，mouseup

我想制作一个jquery函数，“当它处于mousedown时跟随div” – 所以当鼠标按下时，我的页面上的div跟随光标移动。

当鼠标按钮向上时，div保持在鼠标按下的最后位置。

  var posX, posY; $(document).on('click', mueve); function mueve (e) { posX = e.pageX - 20; posY = e.pageY - 20; $('.item').animate({left: posX, top: posY}) }  

CSS：

 .item{ background: #bbb; height: 40px; width: 40px; position: absolute; border-radius: 50%; left: 0; top: 0; } 

Answer 1

砰的一声，看看这个： 小提琴 。

这是javascript：

 var posX, posY, clicked = false; function mueve (e) { clicked = true; posX = e.pageX - 20; posY = e.pageY - 20; $('.item').animate({left: posX, top: posY}); } $(document).on('mousedown', mueve); $(document).on('mouseup', function(e) { clicked = false; }); $(document).mousemove(function(e) { if (clicked) { $('.item').stop(true, true); mueve(e); } }); 

我所做的是：当你点击下来时，你将变量clicked为true，所以当你移动鼠标时，它将使用类’item’移动div。 此外，您必须在更新位置之前清除每个排队的动画。