鼠标拖动改变div列宽和行高

要实现鼠标拖动改变div列宽和行高，你可以使用JavaScript和CSS来完成。下面是一种实现方式：

1. 首先，在HTML中创建一个包含多个div的容器，每个div代表一个列或行。例如，创建一个id为"container"的div容器，并在其中添加一些子div。

<div id="container">
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
</div>

2. 在CSS中设置容器和列的样式。设置列的宽度和高度，以及鼠标光标样式。

#container {
  display: flex;
}

.column {
  flex: 1;
  min-width: 100px;
  min-height: 100px;
  border: 1px solid black;
  cursor: col-resize;
}

3. 在JavaScript中添加事件监听器，以便在鼠标拖动时改变列的宽度和行的高度。

var columns = document.querySelectorAll('.column');
var isResizing = false;
var lastDownX = 0;
var newWidth = 0;

columns.forEach(function(column) {
  column.addEventListener('mousedown', function(e) {
    isResizing = true;
    lastDownX = e.clientX;
    newWidth = column.offsetWidth;
  });

  column.addEventListener('mousemove', function(e) {
    if (!isResizing) return;

    var widthChange = e.clientX - lastDownX;
    newWidth = newWidth + widthChange;

    column.style.width = newWidth + 'px';
  });

  column.addEventListener('mouseup', function() {
    isResizing = false;
  });
});

通过以上代码，你可以在鼠标拖动时改变每个div列的宽度。同样的原理也适用于改变行的高度，只需适当调整CSS和JavaScript即可。