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

以下是一个简单的实现可拖动悬浮按钮的代码示例，使用 JavaScript 和 HTML5 的 drag-and-drop API：

HTML 代码：

<div id="floating-button" draggable="true">
  <span>按钮</span>
</div>

CSS 代码：

#floating-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 100px;
  height: 50px;
  background-color: #4CAF50;
  color: white;
  border-radius: 10px;
  text-align: center;
  line-height: 50px;
  cursor: pointer;
}

JavaScript 代码：

const floatingButton = document.getElementById('floating-button');

// 当用户开始拖动悬浮按钮时
floatingButton.addEventListener('dragstart', function (event) {
  // 记录起始坐标
  event.dataTransfer.setData('startX', event.clientX);
  event.dataTransfer.setData('startY', event.clientY);
});

// 当用户正在拖动悬浮按钮时
floatingButton.addEventListener('drag', function (event) {
  // 计算偏移量
  const startX = event.dataTransfer.getData('startX');
  const startY = event.dataTransfer.getData('startY');
  const offsetX = event.clientX - startX;
  const offsetY = event.clientY - startY;

  // 移动悬浮按钮
  const initialX = parseInt(window.getComputedStyle(floatingButton).getPropertyValue('right'));
  const initialY = parseInt(window.getComputedStyle(floatingButton).getPropertyValue('bottom'));
  floatingButton.style.right = `${initialX - offsetX}px`;
  floatingButton.style.bottom = `${initialY - offsetY}px`;
});

这段代码创建了一个可拖动的悬浮按钮，并且允许用户通过鼠标拖动按钮移动它。当用户开始拖动按钮时，我们记录起始坐标，然后当用户正在拖动按钮时，我们计算当前位置和起始位置之间的偏移量，并将悬浮按钮相应地移动。