在Vue中实现拖拽事件的方法如下：
- 在需要拖拽的元素上绑定mousedown和mouseup事件，分别设置为dragStart和dragEnd函数。
<div class="box" @mousedown="dragStart" @mouseup="dragEnd"></div>
- 在dragStart函数中，设置元素的初始位置和鼠标按下时的坐标，并为document对象绑定mousemove事件，设置为dragging函数。
dragStart(event) { // 获取元素初始位置和鼠标按下时的坐标 this.startX = event.clientX; this.startY = event.clientY; this.offsetX = event.currentTarget.offsetLeft; this.offsetY = event.currentTarget.offsetTop; // 绑定mousemove事件 document.addEventListener('mousemove', this.dragging); }
- 在dragging函数中，计算鼠标移动了多少距离，并将元素的位置进行更新。
dragging(event) { // 计算鼠标移动了多少距离 const deltaX = event.clientX - this.startX; const deltaY = event.clientY - this.startY; // 更新元素的位置 const newLeft = this.offsetX + deltaX; const newTop = this.offsetY + deltaY; event.currentTarget.style.left = newLeft + 'px'; event.currentTarget.style.top = newTop + 'px'; }
- 在dragEnd函数中，解除document对象的mousemove事件。
dragEnd() { document.removeEventListener('mousemove', this.dragging); }
完整的示例代码如下：
<template> <div class="box" @mousedown="dragStart" @mouseup="dragEnd"></div> </template> <script> export default { data() { return { startX: 0, startY: 0, offsetX: 0, offsetY: 0, } }, methods: { dragStart(event) { // 获取元素初始位置和鼠标按下时的坐标 this.startX = event.clientX; this.startY = event.clientY; this.offsetX = event.currentTarget.offsetLeft; this.offsetY = event.currentTarget.offsetTop; // 绑定mousemove事件 document.addEventListener('mousemove', this.dragging); }, dragging(event) { // 计算鼠标移动了多少距离 const deltaX = event.clientX - this.startX; const deltaY = event.clientY - this.startY; // 更新元素的位置 const newLeft = this.offsetX + deltaX; const newTop = this.offsetY + deltaY; event.currentTarget.style.left = newLeft + 'px'; event.currentTarget.style.top = newTop + 'px'; }, dragEnd() { // 解除mousemove事件 document.removeEventListener('mousemove', this.dragging); }, }, } </script>
