页面悬浮按钮可拖动实现（vue和js写法）

在Vue中实现一个可拖动的悬浮按钮可以通过监听鼠标事件来完成。以下是一个简单的示例：

<template>
  <div id="app">
    <div
      class="draggable-button"
      :style="buttonStyle"
      @mousedown="dragButton"
    >
      拖动我
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      isDragging: false,
      buttonTop: 0,
      buttonLeft: 0,
    };
  },
  computed: {
    buttonStyle() {
      return {
        position: 'absolute',
        top: `${this.buttonTop}px`,
        left: `${this.buttonLeft}px`,
      };
    },
  },
  methods: {
    dragButton(event) {
      this.isDragging = true;
      const startX = event.clientX - this.buttonLeft;
      const startY = event.clientY - this.buttonTop;
 
      const moveHandler = (event) => {
        if (this.isDragging) {
          this.buttonTop = event.clientY - startY;
          this.buttonLeft = event.clientX - startX;
        }
      };
 
      document.addEventListener('mousemove', moveHandler);
 
      document.addEventListener('mouseup', () => {
        this.isDragging = false;
        document.removeEventListener('mousemove', moveHandler);
      });
    },
  },
};
</script>
 
<style>
.draggable-button {
  cursor: pointer;
  user-select: none;
  padding: 5px 10px;
  background-color: #42b983;
  color: white;
  border-radius: 5px;
}
</style>

在这个例子中，.draggable-button 元素可以通过鼠标拖动进行移动。当用户按下按钮时，我们开始监听 mousemove 事件以更新按钮的位置。一旦用户释放鼠标按钮，我们停止监听鼠标事件。这个例子使用了Vue的计算属性来动态生成按钮的 style，使得按钮能够根据其当前位置进行定位。