h5可拖动悬浮按钮_js实现悬浮窗效果(支持拖动)

可以通过以下步骤实现 H5 可拖动悬浮按钮的效果：

1. 在 HTML 文件中添加一个按钮元素，并为其设置 id 和 class：

<button id="drag-btn" class="drag-btn">拖动我</button>

2. 在 CSS 文件中为按钮元素设置样式，使其成为一个圆形的悬浮按钮：

.drag-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #007bff;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  line-height: 50px;
  cursor: move;
}

3. 在 JavaScript 文件中为按钮元素添加拖动事件：

var dragBtn = document.getElementById('drag-btn');

// 记录鼠标按下时的坐标和按钮的初始位置
var startX, startY, initialPos;

// 鼠标按下事件
dragBtn.addEventListener('mousedown', function(e) {
  startX = e.clientX;
  startY = e.clientY;
  initialPos = getPosition(dragBtn);

  // 添加鼠标移动和松开事件
  document.addEventListener('mousemove', dragBtnMouseMove);
  document.addEventListener('mouseup', dragBtnMouseUp);
});

// 鼠标移动事件
function dragBtnMouseMove(e) {
  var dx = e.clientX - startX;
  var dy = e.clientY - startY;
  dragBtn.style.left = initialPos.x + dx + 'px';
  dragBtn.style.top = initialPos.y + dy + 'px';
}

// 鼠标松开事件
function dragBtnMouseUp(e) {
  document.removeEventListener('mousemove', dragBtnMouseMove);
  document.removeEventListener('mouseup', dragBtnMouseUp);
}

// 获取元素的坐标
function getPosition(element) {
  var rect = element.getBoundingClientRect();
  return { x: rect.left, y: rect.top };
}

这样就可以实现一个可拖动的悬浮按钮了。通过记录鼠标按下时的坐标和按钮的初始位置，然后在鼠标移动事件中计算偏移量并改变按钮的位置，最后在鼠标松开事件中移除事件监听器，就能实现拖动功能。