我在尝试使用jQuery mousemove,mouseup和mousemove事件在IE8中平移div时遇到问题。一旦我点击mousedown,直到我释放鼠标按钮并检测mouseup才检测到mousemove,我必须再次点击鼠标按钮。
这是javascript:
// ********** CLICK AND DRAG MAP PANNING ********** //
var mouseDown = false;
var mouseX = 0;
var mouseY = 0;
var originalLeft = $("#layout").offset().left;
var originalTop = $("#layout").offset().top;
$("#layout").mousedown(function(event){
mouseDown = true;
mouseX = event.pageX;
mouseY = event.pageY;
originalLeft = $("#layout").offset().left;
originalTop = $("#layout").offset().top;
return false;
});
$(document).mouseup(function(){
mouseDown = false;
return false;
});
$(document).mousemove(function(event){
if (mouseDown == true) {
var panLeft = (event.pageX - mouseX);
var panTop = (event.pageY - mouseY);
var left = originalLeft + panLeft;
var top = originalTop + panTop;
// Constrain the map
var container = $("#map");
var map = $("#layout");
if (left >= container.offset().left) {
left = container.offset().left;
} else if (left + map.width() <= container.offset().left + container.width()) {
left = container.offset().left + container.width() - map.width();
}
if (top >= container.offset().top) {
top = container.offset().top;
} else if (top + map.height() <= container.offset().top + container.height()) {
top = container.offset().top + container.height() - map.top();
}
$("#layout").offset({ left: left, top: top });
} else {
return false;
}
});
// ********** ********** ********** //
这是html:
<div id="map">
<div id="layout">
<img src="images/map.png" alt="map"/>
</div>
</div>
#layout div中的图像设置为与div相同的大小。我认为在IE8中可能存在问题,它认为我试图拖动图像。不知道是不是这种情况,我想把它变成背景,但是我不能正确调整它的大小,因为IE不使用background-size属性。如果我将图像缩小以使用背景,则在放大时会变得模糊。
答案 0 :(得分:2)
可能是因为您将mousedown
绑定到#layout
而将其他两个绑定到document
。您可能还想尝试添加:
if ( 'attachEvent' in document ) {
document.attachEvent('ondragstart', function() { return false; });
}
防止在IE中拖动