javascript - jQuery 和鼠标事件

Question

我对 jQuery 库中的鼠标事件有疑问。我有一个简单的 javascript 函数如下:

$(function() {
    var xpos;
    var ypos;
    $("#pic1").mousedown(function() {
        $("#pic1").mousemove(function(e) {
            xpos = e.pageX;
            ypos = e.pageY;
            $("#pic1").css({'left': xpos, 'top': ypos});
        });
    });
});

它使您可以单击图像，它会跟随鼠标移动。我试图通过使用 mouseup 函数让它停止跟随，但它似乎无法破坏“重绘”方法，它会更新 css 坐标。

HTML:

<img id="pic1" src="img/test.jpg" alt="">

CSS:

#pic1 {
position: absolute;
}

是否有更简单的方法来完成此操作？

Answer 1

您设置 mousemove 触发器的方式是在按下鼠标时绑定(bind)。要删除元素，您需要取消绑定(bind)触发器 ( http://api.jquery.com/unbind/ ) 或在移动处理程序中设置条件，以便仅在满足条件时更新元素的位置，然后确保鼠标向下/向上转动条件开/关。前者看起来更简单，但更简单的可能是使用 jquery ui:http://jqueryui.com/draggable/

祝你好运