1 回答

TA貢獻(xiàn)1794條經(jīng)驗(yàn) 獲得超8個(gè)贊
您可以將位置計(jì)算為與起始位置的偏移量,然后根據(jù)移動(dòng)進(jìn)行更新。這將允許繪制任何部分。您可以(并且應(yīng)該恕我直言)動(dòng)態(tài)附加和刪除事件處理程序。
這可能是這樣的:
<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>
添加回答
舉報(bào)