Question

我想创建一个jquery函数，“当它处于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;
}

Answer 1

轰隆隆，请查看：Fiddle。

这是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。此外，您必须在更新位置之前清除每个排队的动画。

使用带有mousedown，mousemove，mouseup的jquery函数跟随div

1 个答案: