我有这个代码:
j查询:
var mouseDown=false;
var lastPositionX;
var lastPositionY;
var newX;
var newY;
var lastPositionLeft;
var lastPositionTop;
var newLeft;
var newTop;
$("#insideMap").on("mousedown",function(){
mouseDown=true;
lastPositionX=e.pageX;
lastPositionY=e.pageY;
});
$("#insideMap").on("mouseup",function(u){
mouseDown=false;
});
$("#insideMap").on("mouseleave",function(){
mouseDown=false;
});
$("#insideMap").on("mousemove",function(n){
if (mouseDown){
mouseDown = true; // mantain the boolean to prevent mouseleave trigger
newX=n.pageX-lastPositionX;
newY=n.pageY-lastPositionY;
lastPositionLeft=$("#insideMap").position().left;
lastPositionTop=$("#insideMap").position().top;
newLeft=newX+lastPositionLeft;
newTop=newY+lastPositionTop;
$("#insideMap").css({"left":newLeft,"top":newTop});
lastPositionX=n.pageX;
lastPositionY=n.pageY;
}
});
演示:http://jsfiddle.net/SkWeX/3/
但有些事情仍然很糟糕:(效果不好,还是滞后, 你能帮我吗?
:)浏览器有时想要拖动您的图像(BG),您需要防止这种情况!
js小提琴演示
只需将其添加到#insideMap
元素的 CSS 中即可:
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
这段代码就是你所需要的:
var mouseDown=false,
posX = 0,
posY = 0,
innerX = 0,
innerY = 0;
$("#insideMap").on("mousedown",function(e){
innerX = e.pageX - $(this).offset().left;
innerY = e.pageY - $(this).offset().top;
mouseDown= true;
}).on("mouseup",function(){
mouseDown=false;
});
$(document).on("mousemove",function(e){
if (mouseDown){
var m = { x: e.pageX-innerX, y: e.pageY-innerY };
$('#insideMap').css({ left: m.x, top: m.y });
}
});
一些解释:
您的代码很慢,因为在任何注册的鼠标移动(并且有很多)上,您都在重新计算元素位置。错。
- 我在单击变量时抓住元素内的鼠标位置
innerX
并innerX
- 在鼠标移动时,我只是将
CSS element position
移动到实际的鼠标位置(你猜对了:),但减去单击元素的位置(innerX,innerY)(以防止元素跳转到鼠标位置)。