javascript - 使用 javascript 左右平移 DIV 元素

Question

我试图在容器中放置一个 div，当用户单击并拖动文档区域中的某处时，.room 元素通过按住中间的单击按钮在 .viewport 元素内平移。

这里是问题所在:(按住右键点击这个，由于某种原因中间点击不起作用) http://jsfiddle.net/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;
});

Answer 1

这应该更符合您正在寻找的内容。关键变化:

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

使用 delta 改变位置。 .room 的位置应该相对于它的当前位置移动，减去鼠标拖动的位置(而不是相反)。

http://jsfiddle.net/X2PZP/3/