html当表格单元格的宽度用鼠标拖动发生变化时其嵌套的div的宽度随着变化的js代码

HTML表格单元格（td或th）的宽度通常通过CSS控制，而不是直接在JavaScript中改变。但是，如果你想利用JavaScript动态响应用户拖拽列宽的行为，并同步调整嵌套的`div`的宽度，你可以这样做：

首先，在HTML结构中设置好表格和嵌套的`div`：

<table id="myTable">
  <thead>
    <tr>
      <th draggable="true" ondragstart="dragStart(event)" onmouseup="dragEnd(event)">列头</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><div class="nested-div">内容</div></td> <!-- 或者循环创建多个这样的td -->
    </tr>
  </tbody>
</table>

然后，添加一些JavaScript代码：

function dragStart(e) {
  e.dataTransfer.setData('text/html', this.innerHTML); // 保存原始内容
  this.classList.add('draggable'); // 添加样式标记
}

function dragEnd(e) {
  var target = document.elementFromPoint(e.clientX, e.clientY);
  
  if (target.tagName.toLowerCase() === 'th') {
    var parentRow = target.parentNode;
    var newWidth = getNewColumnWidth(target.offsetWidth); // 获取新宽度
    setWidthForNestedDivs(parentRow, newWidth); // 调整所有嵌套div
  }
}

// 获取新的列宽
function getNewColumnWidth(currentWidth) {
  return currentWidth; // 这里可以根据实际需求计算新宽度，例如减去边距等
}

// 设置嵌套div的宽度
function setWidthForNestedDivs(row, newWidth) {
  row.querySelectorAll('.nested-div').forEach(function(div) {
    div.style.width = `${newWidth}px`;
  });
}

// 为表格单元格添加拖拽监听
document.querySelectorAll('th').forEach(function(th) {
  th.addEventListener('mousedown', function() {
    this.classList.add('hover');
  });

  th.addEventListener('mouseout', function() {
    this.classList.remove('hover');
  });
});

这个示例中，当用户开始拖动列头时，会保存原始内容并添加一个“可拖拽”的状态。在拖动结束时，会检查目标元素是否为列头，如果是，则获取新宽度并应用到所有嵌套的`div`上。