仅使用 vanilla JavaScript，不使用 jQuery 或其他库。
通过模拟 textarea 元素的行为，编写了一个小工具来设置某些元素的宽度和高度。
点击右下角的灰色方 block ，光标变为“东南”光标，按住鼠标左键，可以调整大小，松开鼠标，调整大小；就像文本区域一样。这是示例代码；这里的可调整大小的内容是一个带有 overflow:scroll 的 div；但目标是它适用于任何东西(我打算将它与 iframe 一起使用。)
<!DOCTYPE html><html lang="en"><head>
<meta charset="utf-8">
<title>resize test</title>
<style>
table.resizerTable {
border-spacing : 0;
border-collapse : separate;
}
table.resizerTable td { padding: 0; }
table.resizerTable div.resizer {
width : 20px;
height : 20px;
cursor : se-resize;
background-color: #bbb;
}
table.resizerTable div.resizer:active {
background-color: red;
}
div#resizee {
overflow: scroll
}
</style>
<script type="text/javascript">
var resizee = {
getWidth: function(){
return parseFloat(document.getElementById("resizee").style.width);
},
getHeight: function(){
return parseFloat(document.getElementById("resizee").style.height);
},
setWidth: function(w){
document.getElementById("resizee").style.width = w + 'px';
},
setHeight: function(h){
document.getElementById("resizee").style.height = h + 'px';
},
};
var resizer = {
start : null,
mousedown: function(elt, evt){
var mainButtonDown = !!(evt.buttons % 2);
if (!mainButtonDown) return;
this.start = {
x : evt.clientX,
y : evt.clientY,
width : resizee.getWidth(),
height : resizee.getHeight()
};
}
};
function mousemove(evt){
var mainButtonDown = !!(evt.buttons % 2);
if (mainButtonDown){
var start = resizer.start;
if (start){
var x = evt.clientX,
y = evt.clientY,
dx = x - start.x,
dy = y - start.y,
width = start.width + dx,
height = start.height + dy;
resizee.setWidth(width);
resizee.setHeight(height);
} else {
}
} else {
resizer.start = null;
}
//var compSty = getComputedStyle(evt.target);
}
function mouseup(){
resizer.start = null;
}
function bodyOnload(){
document.addEventListener('mousemove', mousemove);
document.addEventListener('mouseup', mouseup);
resizee.setWidth(300);
resizee.setHeight(150);
}
</script>
</head><body onload="bodyOnload();">
<table class="resizerTable">
<tr>
<td>
<div id="resizee">
<fieldset>
<legend>legend title</legend>
<fieldset>
<legend>inner legend title</legend>
lorem ipsum dolor sit amet consectetur adipiscing elit
</fieldset>
<ul><li>foo</li><li>bar</li><li>blah blah</li><li>kvatsh</li><li>one</li><li>zwei</li><li>cinque</li></ul>
</fieldset>
</div>
</td>
<td></td>
</tr>
<tr>
<td></td>
<td>
<div onmousedown="resizer.mousedown(this, event)" id="resizer" class="resizer"></div>
</td>
</tr>
</table>
<div></div>
</body></html>
它在 Firefox 和 IE 中运行良好，但在 Chrome 中只能间歇性运行。 (尚未在 Safari 中测试)。
这是 Chrome 中发生的事情:将鼠标放在 handle 上并猛拉它。这样做5次左右。在某个时候，它会停止工作，光标会变成这样
如果您在不移动的情况下再次单击 handle ，它将恢复工作，但如果您用力拉得太猛，它将再次停止工作。无论我尝试了多少，我都无法在 FF 或 IE 上获得此行为。
这是什么？我的代码中有错误吗？如果它与 Chrome 浏览器有关，它是什么，可以解决吗？
更新 对于那些复制和粘贴代码的人:您需要控制负宽度/高度。
最佳答案
当您尝试调整大小时，您可能正在选择 .resizer，您可以将 user-select: none 样式设置为 .resizer 以避免它被选中:
table.resizerTable {
border-spacing : 0;
border-collapse : separate;
user-select: none;
}
<!DOCTYPE html><html lang="en"><head>
<meta charset="utf-8">
<title>resize test</title>
<style>
table.resizerTable {
border-spacing : 0;
border-collapse : separate;
user-select: none;
}
table.resizerTable td { padding: 0; }
table.resizerTable div.resizer {
width : 20px;
height : 20px;
cursor : se-resize;
background-color: #bbb;
}
table.resizerTable div.resizer:active {
background-color: red;
}
div#resizee {
overflow: scroll;
}
</style>
<script type="text/javascript">
var resizee = {
getWidth: function(){
return parseFloat(document.getElementById("resizee").style.width);
},
getHeight: function(){
return parseFloat(document.getElementById("resizee").style.height);
},
setWidth: function(w){
document.getElementById("resizee").style.width = w + 'px';
},
setHeight: function(h){
document.getElementById("resizee").style.height = h + 'px';
},
};
var resizer = {
start : null,
mousedown: function(elt, evt){
var mainButtonDown = !!(evt.buttons % 2);
if (!mainButtonDown) return;
this.start = {
x : evt.clientX,
y : evt.clientY,
width : resizee.getWidth(),
height : resizee.getHeight()
};
}
};
function mousemove(evt){
var mainButtonDown = !!(evt.buttons % 2);
if (mainButtonDown){
var start = resizer.start;
if (start){
var x = evt.clientX,
y = evt.clientY,
dx = x - start.x,
dy = y - start.y,
width = start.width + dx,
height = start.height + dy;
resizee.setWidth(width);
resizee.setHeight(height);
} else {
}
} else {
resizer.start = null;
}
//var compSty = getComputedStyle(evt.target);
}
function mouseup(){
resizer.start = null;
}
function bodyOnload(){
document.addEventListener('mousemove', mousemove);
document.addEventListener('mouseup', mouseup);
resizee.setWidth(300);
resizee.setHeight(150);
}
</script>
</head><body onload="bodyOnload();">
<table class="resizerTable">
<tr>
<td>
<div id="resizee">
<fieldset>
<legend>legend title</legend>
<fieldset>
<legend>inner legend title</legend>
lorem ipsum dolor sit amet consectetur adipiscing elit
</fieldset>
<ul><li>foo</li><li>bar</li><li>blah blah</li><li>kvatsh</li><li>one</li><li>zwei</li><li>cinque</li></ul>
</fieldset>
</div>
</td>
<td></td>
</tr>
<tr>
<td></td>
<td>
<div onmousedown="resizer.mousedown(this, event)" id="resizer" class="resizer"></div>
</td>
</tr>
</table>
<div></div>
</body></html>关于javascript - HTML/Javascript Resizer 小工具在 Chrome 中无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58620081/