面试题：Vue中如何基于原生事件实现简单的拖拽功能

Question

在Vue项目里，不借助第三方库，仅利用原生的鼠标事件（mousedown、mousemove、mouseup）来实现一个元素的简单拖拽功能，简述实现思路并给出关键代码片段。

Answer 1

实现思路

1. 监听 mousedown 事件，记录初始鼠标位置和元素的初始位置，并开始监听 mousemove 和 mouseup 事件。
2. 在 mousemove 事件中，根据鼠标移动的距离计算元素应移动的距离，更新元素的位置。
3. 在 mouseup 事件中，取消对 mousemove 和 mouseup 事件的监听，结束拖拽。

关键代码片段

<template>
  <div id="dragDiv" @mousedown="onMouseDown">可拖拽元素</div>
</template>

<script>
export default {
  data() {
    return {
      isDragging: false,
      startX: 0,
      startY: 0,
      initialLeft: 0,
      initialTop: 0
    }
  },
  methods: {
    onMouseDown(e) {
      this.isDragging = true;
      this.startX = e.pageX;
      this.startY = e.pageY;
      this.initialLeft = parseInt(this.$el.style.left) || 0;
      this.initialTop = parseInt(this.$el.style.top) || 0;

      document.addEventListener('mousemove', this.onMouseMove);
      document.addEventListener('mouseup', this.onMouseUp);
    },
    onMouseMove(e) {
      if (this.isDragging) {
        const dx = e.pageX - this.startX;
        const dy = e.pageY - this.startY;
        this.$el.style.left = this.initialLeft + dx + 'px';
        this.$el.style.top = this.initialTop + dy + 'px';
      }
    },
    onMouseUp() {
      this.isDragging = false;
      document.removeEventListener('mousemove', this.onMouseMove);
      document.removeEventListener('mouseup', this.onMouseUp);
    }
  }
}
</script>

<style scoped>
#dragDiv {
  position: absolute;
  background-color: lightblue;
  padding: 10px;
  cursor: move;
}
</style>