在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

您可以将位置计算为起始位置的偏移量，然后根据移动进行更新。这将允许任何部分绘制。您可以(也应该是IMHO(动态地附加和删除事件处理程序。

这可能是什么样子：

<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>