使用带有 mousedown、mousemove、mouseup 的 jquery 函数跟随 div [重复]

我想制作一个 jquery 函数，“当 div 处于 mousedown 状态时跟随 div” - 因此，当鼠标移动时，当鼠标按钮按下时，我页面上的 div 跟随光标。

当鼠标按钮抬起时，div 停留在鼠标按下的最后位置。

<script src="jquery-2.0.3.min.js"></script>
<script>
    var posX, posY;
    $(document).on('click', mueve);
    function mueve (e) {
        posX = e.pageX - 20;
        posY = e.pageY - 20;
        $('.item').animate({left: posX, top: posY})
    }
</script>

css:

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

繁荣，看看这个：Fiddle http://jsfiddle.net/stA8K/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。此外，您必须在更新位置之前清除每个排队的动画。