我试图在容器中有一个div,当用户单击并拖动文档区域中的某个位置时,按住中间的单击按钮,.room元素将在.viewport元素内平移.
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 + '
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;
});
解决方法:
这应该更符合您的需求.关键变更:
delta.x = e.pageX - drag.x;
delta.y = e.pageY - drag.y;
使用增量来更改位置. .room的位置应相对于其当前位置移动,减去鼠标拖动位置(反之亦然).
标签:html5,web,html,javascript,jquery
来源: https://codeday.me/bug/20191029/1962839.html