replace mousemove by mousedrag?

Question

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>

Answer 1

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
        }
    });
});

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.

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.

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.

Answer 2

I do not have enough reputation to comment but I wanted to add that the above code (from the correct answer) could instigate a problem. If you only want one special "thing" to for example move when dragged (for example an image to be moved with the current clientX position) it is good to go with $(document).mouseup... instead of $("thing").mouseup since you might not want to have to release your mouse button on that exact thing. This caused a problem for me and I just wanted to mention it.