利用js写一段拖拽模态框的案例

以下是一段使用原生JavaScript实现拖拽模态框的示例代码：

HTML代码：

<div class="modal">
  <div class="modal-header">
    <h3 class="modal-title">Modal Title</h3>
    <button class="modal-close">x</button>
  </div>
  <div class="modal-body">
    <p>Modal Content</p>
  </div>
</div>

CSS代码：

.modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  width: 400px;
  height: 300px;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background-color: #f5f5f5;
  cursor: move;
}

.modal-title {
  margin: 0;
}

.modal-close {
  border: none;
  background-color: transparent;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
}

.modal-body {
  padding: 10px;
}

JavaScript代码：

var modal = document.querySelector('.modal');
var modalHeader = document.querySelector('.modal-header');
var isDragging = false;
var offsetX = 0;
var offsetY = 0;

modalHeader.addEventListener('mousedown', function(e) {
  isDragging = true;
  offsetX = e.offsetX;
  offsetY = e.offsetY;
});

document.addEventListener('mousemove', function(e) {
  if (isDragging) {
    modal.style.left = e.pageX - offsetX + 'px';
    modal.style.top = e.pageY - offsetY + 'px';
  }
});

document.addEventListener('mouseup', function() {
  isDragging = false;
});

var modalClose = document.querySelector('.modal-close');

modalClose.addEventListener('click', function() {
  modal.style.display = 'none';
});

解释：

1. 首先，我们选择模态框和模态框头部，然后定义一个变量isDragging表示是否正在拖拽，以及变量offsetX和offsetY保存鼠标相对于模态框左上角的偏移量。

2. 当鼠标在模态框头部按下时，设置isDragging为true，并计算offsetX和offsetY。

3. 当鼠标在文档中移动时，如果isDragging为true，则根据鼠标位置和偏移量计算模态框的新位置，并将其应用到模态框上。

4. 当鼠标松开时，将isDragging设置为false。

5. 最后，选择模态框关闭按钮，为其添加一个点击事件，当点击时将模态框隐藏。