有没有办法通过拖放来调整
<div>最好的方法是使用CSS3。至少 Webkit 和 Gecko 支持。
根据w3c规范：
div.my_class {
resize:both;
overflow:auto; /* something other than visible */
}
Webkit 和 Firefox 对规范的解释方式不同。在 Webkit 中，大小仅限于设置的宽度和高度。还有一个问题：如何使用 CSS 使元素的尺寸调整为小于初始尺寸？ 关于这一点。
div {
border: 1px solid black;
}
.resizable-content {
min-height: 30px;
min-width: 30px;
resize: both;
overflow: auto;
max-height: fit-content;
max-width: fit-content;
}<div class="resizable-content">Resize Me!</div>纯 CSS3 方法的问题是只有 div 的右下角可以拖动。用户几乎肯定会想要从任意的边框调整 div 的大小，而不仅仅是右下角。
在浪费了大量时间尝试通过从 Stack Overflow 复制代码片段来完成此任务之后，我强烈建议在您的项目中使用优秀的 InteractJS JavaScript 库。它允许您轻松创建可调整大小（且可拖动）的 div，并且可以从各个方向调整大小。
let root = document.documentElement;
let spliter = document.querySelector('.spliter-div');
let rowDiv = document.querySelector('.row-divs');
let cd1 = document.getElementById('cd-1');
var isDown = false;
var isHover = false;
var minWidth = 127;
var maxWidth = 600;
function setPosition() {
var cl = this.document.querySelector('.col-div');
if (cl) {
root.style.setProperty('--m-x', (cl.offsetWidth + 3.5) + 'px');
}
minWidth = (parseInt(rowDiv.clientWidth / 10) * 2) + 22;
maxWidth = parseInt(rowDiv.clientWidth - minWidth);
}
function moveTo(e) {
if (e.clientX > minWidth && e.clientX < maxWidth) {
if (cd1.classList.contains('col-div-flex')) {
cd1.classList.remove('col-div-flex');
}
cd1.style.width = e.clientX + 'px';
root.style.setProperty('--m-x', (e.clientX + 9.5) + 'px');
}
}
window.addEventListener('DOMContentLoaded', function (e) {
setPosition();
});
window.addEventListener('resize', function (e) {
setPosition();
});
root.addEventListener('mousedown', function (e) {
if (isHover) {
isDown = true;
}
}, true);
document.addEventListener('mouseup', function (e) {
isDown = false;
if (isHover) {
//...
}
}, true);
document.addEventListener('mousemove', function (e) {
if (isDown) {
moveTo(e);
}
});
spliter.addEventListener('mouseenter', function (e) {
isHover = true;
spliter.style.cursor = 'col-resize';
});
spliter.addEventListener('mouseout', function (e) {
isHover = false;
});:root{
--m-x: 0px;
}
html,
body{
height: 100% ;
width: 100% ;
margin: 0 ;
overflow: hidden ;
}
body{
margin-bottom: 60px ;
}
.container-divs{
display: flex ;
flex: 1 1 auto ;
height: 100% ;
width: 100% ;
}
.row-divs{
display: flex ;
width: 100% ;
}
.col-div{
margin: 3px ;
padding: 3px ;
min-width: 20% ;
max-width: 80% ;
}
.col-div-flex{
flex: 1 0 0%;
}
.border-div{
border: 1px #a3a3a3 ridge;
border-radius: 9px;
}
.spliter-div{
width: 5px ;
height: 96% ;
margin: 3px 0;
background: #9a969676;
position: absolute;
left: var(--m-x);
margin-top: 9px ;
cursor: col-resize;
}<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Divs - Resizeable</title>
</head>
<body>
<div class="container-divs">
<div class="row-divs">
<div id="cd-1" class="col-div col-div-flex border-div" style="background-color:#d5ff00f7">
</div>
<div class="spliter-div"></div>
<div id="cd-2" class="col-div col-div-flex border-div" style="background-color: #6719b5e2">
</div>
</div>
</div>
</body>
</html>如果您需要为 mustberesizeable tags 数组中的每个标签（也是
window[WIN_RESIZED] = [] // init the window's array
for (var i in tags) {
window[WIN_RESIZED].push(tags[i])
}
那组之后
window.addEventListener('resize', function(e){
for (var i in window[WIN_RESIZED]) {
doOnResize(window[WIN_RESIZED][i])
}
})
必须写在开头的某个地方
const WIN_RESIZED = 'move_resized_divs'
具有任意名称，例如“move_resized_divs”