用mousedrag替换mousemove？ [英] replace mousemove by mousedrag?

问题描述

标题解释了这一切。我在提供拖拽事件时遇到了问题。我试图用mousedown替换mousemove，可能会被mousedown一次触发并安定下来，但它有助于帮助。如何以编程方式执行此操作。

The title explains it all.I am facing problem when it comes to providing drag event.I tried replacing mousemove by mousedown,may be mousedown fires once and settles down,but it dint help.How can i programmatically do this.

如果您想引用我想要操作的代码，您可以参考此代码。请忽略它。

In case you want to refer what code i am trying to manipulate you can refer this code .Else ignore it.

         <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>

推荐答案

你想在<$ c $中做所有事情c> mousemove（）仅在按下鼠标按钮时，对吗？

You want to do everything in your mousemove() only when a mouse button is being pressed, right?

$(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（） -function。

We use our own variable to keep track of the left mouse button (lbDown). Set it to true on mousedown and to false on mouseup, then react to this in the mousemove()-function.

编辑

这是一个小提琴。
当然，你需要添加一些代码来隐藏放大镜一旦用户停止拖动它。

EDIT
Here's a fiddle of it.
Of course, you'll want to add some code to hide the magnifying glass once the user stopped dragging it around.

根据请求，这里是对其背后逻辑的解释：

因为JS没有本地检查方式一个鼠标按钮状态，我们需要自己实现这个功能。

鼠标按钮有两种状态：它是 up 或 down ，因此我们必须引入一个布尔变量来跟踪鼠标按钮的状态（左侧按钮的 lbDown 在我的代码中。）
现在我们要做的就是根据状态设置这个变量。幸运的是，JS提供了事件处理程序： mousedown 在鼠标按钮关闭（单击）并且 mouseup 被触发后被触发一旦用户释放单击的按钮。所以我们在 mousedown 和 false true c> in mouseup 。

我们现在可以用简单的 if（lbDown）如果其中一个鼠标按钮当前是在检查时关闭的话。

By request, here's the explanation of the logic behind it:
As JS has no native way of checking a mouse-buttons state, we need to implement this feature ourselves.
A mouse-button has two states: it's either up or down, thus we have to introduce a boolean variable to keep track of the mouse-buttons state (lbDown for left button down in my code).
Now all we have to do is set this variable according to the state. Luckily, JS provides event-handlers: mousedown gets fired once the mouse button is down (clicked) and mouseup gets fired once the user releases the clicked button. So we set our boolean variable to true in mousedown and to false in mouseup.
We may now check anywhere in the code with a simple if(lbDown) if one of the mouse buttons is currently, by the time of the check, down.

缺点是，到现在为止，每个按钮都适用于每个按钮。鼠标按钮！我们还没有实现任何区分按钮的东西。

JS中的每个事件都有属性，它可以让你确定哪个键或按钮是按下以触发（键盘 - /鼠标 - ）事件。

现在，当阅读我们读取的上的jQuery API ，如果是鼠标事件，哪个将<左键单击code> 1 ，所以我们添加另一个if mousedown 和 mouseup ，所以 lbDown 只会在点击左键时设置。

The downside is, this would - by now - be true for every mouse-button! We haven't implemented anything yet to distinguish the buttons.
Every event in JS has the property which, which lets you determine which key or button was pressed to trigger the (keyboard-/mouse-)event.
Now, when reading the jQuery API on which we read, that in case of a mouse event, which will be 1 for the left mouse button, so we add another if to mousedown and mouseup, so lbDown will only be set, when the left button is clicked.

这篇关于用mousedrag替换mousemove？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！