2

我对 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;
}

有没有更简单的方法来实现这一点？

4

4 回答 4

0

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

祝你好运

于 2013-10-13T04:10:40.987 回答
0

如果您不想使用可拖动的 jquery ui，您的结构将如下所示：

$(function() {        
    $("#pic1").on('mousedown', function() {
        $(this).on('mousemove', function(e) {
            $(this).css({'left': e.pageX, 'top': e.pageY});
        });
    }).on('mouseup', function() {
        $(this).off('mousemove');
    });
});
于 2013-10-13T04:14:57.263 回答
0

.on()这是使用 jQuery和的一个小重构.off()：

$(function() {
    var xpos,
        ypos,
        $pic = $('#pic1');

    $pic.on('mousedown', function() {
        $pic.on('mousemove', function(e) {
            xpos = e.pageX;
            ypos = e.pageY;
            $pic.css({'left': xpos, 'top': ypos});
        });
    });

    $pic.on('mouseup',function(){
        $pic.off('mousemove');
    });
});

演示：http: //jsfiddle.net/tYpKL/1/

.off()是一种非常有用的方法，它允许您取消绑定使用.on().

我认为您应该考虑使用库来处理此功能，因为从演示中可以看出，您甚至还没有接近可靠的用户体验。:)

祝你好运！

于 2013-10-13T04:18:31.170 回答
0

有一个更简单的解决方案。

HTML：

<html>
<head>
     <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/>
     <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
     <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
     <style>
         #pic1 { width: 100px; height: 100px; padding: 1px; }
     </style>
     <script>
         $(function() {
             $("#pic1").draggable();
         });
     </script>
</head>
<body>
    <div id="pic1" class="ui-widget-content">
        <img src="pic1.jpg" alt="Image 1">
    </div>
</body>
</html>

这是一个链接 ( http://api.jqueryui.com/draggable/ )，它将解释用于可拖动功能的 API 的所有细节。

于 2013-10-13T04:28:42.207 回答