实现一个窗口拖拽功能

代码如下
```html
<!DOCTYPE html>
<html>
<head>
  <style>
    /* 定义窗口的样式 */
    .window {
      position: absolute;
      width: 300px;
      height: 200px;
      background-color: #f1f1f1;
      border: 1px solid #ccc;
      padding: 10px;
    }

/* 定义关闭按钮的样式 */
    .close-button {
      float: right;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div id="myWindow" class="window">
    <div id="content">
      
      <h2>可拖动的窗口</h2>
      <p>这是一个可拖动的窗口示例。</p>
    </div>
    <span class="close-button">关闭</span>
  </div>

// 初始化窗口位置
    var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
    windowElement.addEventListener('mousedown', dragMouseDown);

function dragMouseDown(e) {
      e = e || window.event;
      e.preventDefault();
      // 获取鼠标点击位置的初始坐标
      pos3 = e.clientX;
      pos4 = e.clientY;
      document.addEventListener('mouseup', closeDragElement);
      document.addEventListener('mousemove', elementDrag);
    }

function elementDrag(e) {
      e = e || window.event;
      e.preventDefault();
      // 计算鼠标移动的距离
      pos1 = pos3 - e.clientX;
      pos2 = pos4 - e.clientY;
      pos3 = e.clientX;
      pos4 = e.clientY;
      // 设置窗口的新位置
      windowElement.style.top = (windowElement.offsetTop - pos2) + 'px';
      windowElement.style.left = (windowElement.offsetLeft - pos1) + 'px';
    }

function closeDragElement() {
      // 停止拖动窗口
      document.removeEventListener('mouseup', closeDragElement);
      document.removeEventListener('mousemove', elementDrag);
    }

// 添加关闭按钮的点击事件处理程序
    closeButton.addEventListener('click', function() {
      windowElement.style.display = 'none';
    });
  </script>
</body>
</html>
```

相关推荐

近期文章