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

你可以通过以下步骤使用 JavaScript 实现可拖动悬浮按钮的效果：

1. 创建一个 HTML 页面，并添加一个按钮元素。你可以使用以下代码：

<button id="floating-button">悬浮按钮</button>

2. 在 CSS 中设置按钮元素的样式，使其看起来像一个悬浮按钮。你可以使用以下代码：

#floating-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  background-color: #4285f4;
  color: #fff;
  border-radius: 50%;
  border: none;
  outline: none;
  cursor: move;
}

3. 在 JavaScript 中添加事件监听器，以便在用户单击按钮时启动拖动功能。你可以使用以下代码：

// 获取悬浮按钮元素
const floatingButton = document.getElementById('floating-button');

// 定义变量，用于存储鼠标按下时的坐标
let startX, startY;

// 添加鼠标按下事件监听器
floatingButton.addEventListener('mousedown', function(e) {
  // 记录鼠标按下时的坐标
  startX = e.clientX;
  startY = e.clientY;

  // 添加鼠标移动事件监听器
  document.addEventListener('mousemove', moveButton);
});

// 添加鼠标松开事件监听器
document.addEventListener('mouseup', function() {
  // 移除鼠标移动事件监听器
  document.removeEventListener('mousemove', moveButton);
});

// 定义函数，用于移动悬浮按钮
function moveButton(e) {
  // 计算鼠标移动的距离
  const deltaX = e.clientX - startX;
  const deltaY = e.clientY - startY;

  // 获取悬浮按钮的当前位置
  const buttonPosition = floatingButton.getBoundingClientRect();

  // 移动悬浮按钮到新的位置
  floatingButton.style.left = buttonPosition.left + deltaX + 'px';
  floatingButton.style.top = buttonPosition.top + deltaY + 'px';

  // 更新鼠标按下时的坐标
  startX = e.clientX;
  startY = e.clientY;
}

以上代码通过添加鼠标事件监听器，实现了当用户按下鼠标左键时，悬浮按钮可以跟随鼠标移动。你可以根据需要修改样式和位置参数，以适应你的代码。