用鼠标拖动替换鼠标移动？

Question

标题说明了一切。我在提供拖动事件时遇到了问题。我尝试用mousedown 替换mousemove，可能是mousedown 触发一次并稳定下来，但它没有帮助。我怎样才能以编程方式做到这一点。

如果您想参考我试图操作的代码，您可以参考此代码；否则忽略它：

<script>
$(document).ready(function () {

    $(".toolImage").mouseover(function () {
        $(this).parent(".toolTip").find(".toolTipDesc").css("display", "block");
    });
    $(".toolImage").mouseleave(function () {
        $(this).parent(".toolTip").find(".toolTipDesc").css("display", "none");
    });
    var native_width = 0;
    var native_height = 0;

    //Now the mousemove function
    $(".magnify").mousemove(function (e) {

        if (!native_width && !native_height) {
            //This will create a new image object with the same image as that in .small
            //We cannot directly get the dimensions from .small because of the
            //width specified to 200px in the html. To get the actual dimensions we have
            //created this image object.
            var image_object = new Image();
            image_object.src = $(".small").attr("src");

            native_width = image_object.width;
            native_height = image_object.height;
        } else {

            var magnify_offset = $(this).offset();
            var mx = e.pageX - magnify_offset.left;
            var my = e.pageY - magnify_offset.top;

            //Finally the code to fade out the glass if the mouse is outside the container
            if (mx < $(this).width() && my < $(this).height() && mx > 0 && my > 0) {
                $(".large").fadeIn(100);
            } else {
                $(".large").fadeOut(100);
            }
            if ($(".large").is(":visible")) {
                var rx = Math.round(mx / $(".small").width() * native_width - $(".large").width() / 2) * -1;
                var ry = Math.round(my / $(".small").height() * native_height - $(".large").height() / 2) * -1;
                var bgp = rx + "px " + ry + "px";

                //Time to move the magnifying glass with the mouse
                var px = (mx - $(".large").width() / 2);
                var py = (my - $(".large").height() / 2);

                $(".large").css({
                    left: px,
                    top: py + 10,
                    backgroundPosition: bgp
                });
            }
        }
    })

    $('.t1').mouseenter(function () {

        $('.pointerTxt').fadeIn();
    });

    $('.t1').mouseleave(function () {

        $('.pointerTxt').fadeOut();
    });

});
</script>

Answer 1

您只想在按下鼠标按钮时在mousemove() 中执行所有操作，对吗？

$(document).ready(function() {
    var lbDown = false;

    $(".magnify").mousedown(function(e) {
        if (e.which === 1) {
            lbDown = true;
        }
    });
    $(".magnify").mouseup(function(e) {
        if(e.which === 1) {
            lbDown = false;
        }
    });

    $(".magnify").mousemove(function(e) {
        if(lbDown) {
            //your code here
        }
    });
});

我们使用自己的变量来跟踪鼠标左键 (lbDown)。在 mousedown 时将其设置为 true，在 mouseup 时将其设置为 false，然后在 mousemove() 函数中对此做出反应。

编辑
这是其中的fiddle。
当然，一旦用户停止拖动放大镜，您需要添加一些代码来隐藏放大镜。

应要求，以下是其背后的逻辑解释：
由于 JS 没有原生的方法来检查鼠标按钮的状态，我们需要自己实现这个功能。
鼠标按钮有两种状态：up 或 down，因此我们必须引入一个布尔变量来跟踪鼠标按钮状态（lbDown 表示左键按下在我的代码中）。
现在我们要做的就是根据状态设置这个变量。幸运的是，JS 提供了事件处理程序：一旦按下鼠标按钮（单击），mousedown 就会被触发，而一旦用户释放点击的按钮，mouseup 就会被触发。所以我们将布尔变量设置为mousedown 中的true 和mouseup 中的false。
我们现在可以使用简单的if(lbDown) 检查代码中的任何位置，如果在检查时其中一个鼠标按钮当前处于按下状态。

缺点是，到现在为止，这对于每个鼠标按钮都是正确的！我们还没有实现任何东西来区分按钮。
JS 中的每个事件都有属性which，它可以让您确定按下哪个键或按钮来触发（键盘-/鼠标-）事件。
现在，当我们读取jQuery API on which 时，如果发生鼠标事件，which 将是鼠标左键的1，所以我们在mousedown 和mouseup 中添加另一个if，所以@987654347 @ 只会在单击左键时设置。