我使用的iframe增加了对拖动功能的支持,但是调整大小却不能很好地运行。 MouseUp大多数时间都没有被解雇。我该怎么办呢?
<!DOCTYPE html>
<html>
<head>
<title>MB Docs</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="margin:5px;">
<table id="maingrid" cellpadding="0" cellspacing="0" style="border:0px;"><tr>
<div style="float:left;">
<td><iframe id="ifmenu" name="menu" height="600" width="200" style="border:1px solid #999;"></iframe></td>
<td id="ifdivider" style="width:3px;cursor:col-resize;"></td>
<td><iframe id="ifmain" name="main" height="600" width="300" style="border:1px solid #999;"></iframe></td>
</tr></table>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function doResize() {
//set height and width of frames
var h = window.innerHeight - 10;
$('#ifmenu').css('height', h);
$('#ifmain').css('height', h);
}
window.onresize = function(event) {
doResize();
}
$(document).ready(function() {
doResize();
//attach drag support divider.
var isDragging = false;
var xOffset = 0;
$('#ifdivider').mousedown(function(e) {
isDragging = true;
xOffset = e.pageX;
console.log('down');
});
$('#ifmenu').mouseup(function() {
isDragging = false;
console.log('up');
});
$('#maingrid').mousemove(function(e) {
if (isDragging && e.pageX < 500) {
$('#ifmenu').css('width',e.pageX - 2);
console.log('move');
}
});
});
</script>
</html>
&#13;
答案 0 :(得分:0)
拖动时,mouseUp和mouseMove事件可能发生在任何其他元素上。如果你将mouseUp / mouseMove移出窗口边界,它甚至可能在某些浏览器上根本不会出现。
您可以尝试将mouseUp和mouseMove事件放在整个文档而不是特定对象上,并且只有在开始拖动时才会删除,然后删除这些处理程序。
离。 (另)
numpy.exp