在 div 内拖动元素，但拖动时元素闪烁

Question

我试图在另一个 div 中拖动一个元素，但在拖动时它一直在闪烁。我用这个沙箱https://codesandbox.io/s/focused-cache-l3yos

重现了这个问题

<template>
  <div id="app">
    <div id="board" @mousemove="dragOver">
      <div
        class="draggableItem"
        @mousedown="dragStart"
        @mouseup="dragStop"
        :style="{top: this.top + 'px', left: this.left + 'px'}"
      >This should be draggable</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data: function() {
    return {
      isDragging: false,
      top: 50,
      left: 50
    };
  },
  methods: {
    dragOver: function(e) {
      if (this.isDragging) {
        this.left = e.offsetX;
        this.top = e.offsetY;
      }
    },
    dragStart: function(e) {
      this.isDragging = true;
    },
    dragStop: function(e) {
      this.isDragging = false;
    }
  }
};
</script>

Answer 1

您可以将位置计算为与起始位置的偏移量，然后根据移动进行更新。这将允许绘制任何部分。您可以（并且应该恕我直言）动态附加和删除事件处理程序。

这可能是这样的：

<template>
  <div id="app">
    <div id="board">
      <div
        class="draggableItem"
        @mousedown="dragStart"
        :style="{top: this.top + 'px', left: this.left + 'px'}"
      >This should be draggable</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data: function() {
    return {
      isDragging: false,
      top: 50,
      left: 50,
      startTop: 0,
      startLeft: 0
    };
  },
  methods: {
    dragOver: function(e) {
      if (this.isDragging) {
        this.top = e.clientY - this.startTop;
        this.left = e.clientX - this.startLeft;
      }
    },
    dragStart: function(e) {
      window.addEventListener('mousemove', this.dragOver)
      window.addEventListener('mouseup', this.dragStop)
      this.isDragging = true;
      this.startTop = e.clientY - this.top;
      this.startLeft = e.clientX - this.left;
    },
    dragStop: function(e) {
      window.removeEventListener('mousemove', this.dragOver)
      window.removeEventListener('mouseup', this.dragStop)
      this.isDragging = false;
    }
  }
};
</script>