鼠标拖拽移动子窗体的JS实现

要实现鼠标拖拽移动子窗体的功能，你可以使用JavaScript结合HTML和CSS。以下是一个简单的实现示例，它展示了如何使一个可拖动的div元素（作为子窗体）。

HTML部分（index.html）:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Draggable Div</title>
<style>
  #draggable {
    width: 200px;
    height: 100px;
    position: absolute;
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    text-align: center;
    line-height: 100px;
    cursor: move;
  }
</style>
</head>
<body>

<div id="draggable">拖拽我</div>

<script src="draggable.js"></script>
</body>
</html>

JavaScript部分（draggable.js）:


document.addEventListener('DOMContentLoaded', function() {
  const draggable = document.getElementById('draggable');
  let active = false;
  let currentX;
  let currentY;
  let initialX;
  let initialY;
  let xOffset = 0;
  let yOffset = 0;

  draggable.addEventListener('mousedown', dragStart, false);

  function dragStart(e) {
    initialX = e.clientX - xOffset;
    initialY = e.clientY - yOffset;

    if (e.target === draggable) {
      active = true;
    }
  }

  document.addEventListener('mousemove', drag, false);

  function drag(e) {
    if (active) {
      e.preventDefault();

      xOffset = e.clientX - initialX;
      yOffset = e.clientY - initialY;

      setTranslate(xOffset, yOffset, draggable);
    }
  }

  document.addEventListener('mouseup', dragStop, false);

  function dragStop() {
    initialX = currentX;
    initialY = currentY;
    active = false;
  }

  function setTranslate(xPos, yPos, el) {
    el.style.transform = `translate3d(${xPos}px, ${yPos}px, 0)`;
  }
});

在这个示例中，我们创建了一个可拖动的`div`元素，并给它设置了一个`mousedown`事件监听器来开始拖动操作。当鼠标移动时，我们计算鼠标的当前位置与初始点击位置之间的偏移量，并使用CSS的`transform: translate3d()`属性来更新`div`的位置。当鼠标释放时，拖动操作停止。

请注意，这个示例使用了`transform: translate3d()`而不是直接修改`left`和`top`属性，因为`transform`可以提供更好的性能，特别是在处理复杂的动画和布局时。