I am trying to have a div in a container which when the user clicks and drags somewhere in the document area, the .room element pans around inside the .viewport element by holding down the middle click button.

Here is the issue: (Hold right click for this one, middle click didn't work for some reason) /

JS

var mouseX = 0;
var mouseY = 0;
var scale = 1.0;

$(document).mousemove(function (e) {

    var offset = $('.room').offset();

    //relative mouse x,y
    mouseX = parseFloat((e.pageX - offset.left) / scale, 2);
    mouseY = parseFloat((e.pageY - offset.top) / scale, 2);

    //absolute mouse x,y
    mouseXRaw = e.pageX;
    mouseYRaw = e.pageY;

    $(".room").html(mouseX + ', ' + mouseY + '<br />Right click document and pan');

    switch (e.which) {
        case 3:
            $('.room').css({
                left: mouseX,
                top: mouseY
            });
            break;
    }
    return true;
});

$(document).on('contextmenu', function () {
    return false;
});

I am trying to have a div in a container which when the user clicks and drags somewhere in the document area, the .room element pans around inside the .viewport element by holding down the middle click button.

Here is the issue: (Hold right click for this one, middle click didn't work for some reason) http://jsfiddle/JeZj5/2/

JS

var mouseX = 0;
var mouseY = 0;
var scale = 1.0;

$(document).mousemove(function (e) {

    var offset = $('.room').offset();

    //relative mouse x,y
    mouseX = parseFloat((e.pageX - offset.left) / scale, 2);
    mouseY = parseFloat((e.pageY - offset.top) / scale, 2);

    //absolute mouse x,y
    mouseXRaw = e.pageX;
    mouseYRaw = e.pageY;

    $(".room").html(mouseX + ', ' + mouseY + '<br />Right click document and pan');

    switch (e.which) {
        case 3:
            $('.room').css({
                left: mouseX,
                top: mouseY
            });
            break;
    }
    return true;
});

$(document).on('contextmenu', function () {
    return false;
});

• javascript
• jquery
• html
• web

• You should watch the mousedown event and then track movement instead of watching all the mouse movement and then seeing if the mouse is down. – Alexander Mistakidis Commented Mar 5, 2014 at 2:36

1 Answer 1

This should be more along the lines of what you're looking for. Key change:

delta.x = e.pageX - drag.x;
delta.y = e.pageY - drag.y;

Using the delta to change the position. The .room's position should be moving with respect to it's current location, minus the mouse drag position (not the other way around).

http://jsfiddle/X2PZP/3/