vue实现弹出窗口移动
Vue 实现弹出窗口移动
使用鼠标事件实现拖拽
在 Vue 中实现弹出窗口移动可以通过监听鼠标事件来完成。创建一个可拖拽的弹出窗口需要处理 mousedown、mousemove 和 mouseup 事件。
<template>
<div
class="popup"
:style="{ left: position.x + 'px', top: position.y + 'px' }"
@mousedown="startDrag"
>
<div class="popup-header">可拖拽窗口</div>
<div class="popup-content">内容区域</div>
</div>
</template>
<script>
export default {
data() {
return {
position: { x: 100, y: 100 },
isDragging: false,
dragOffset: { x: 0, y: 0 }
};
},
methods: {
startDrag(e) {
this.isDragging = true;
this.dragOffset.x = e.clientX - this.position.x;
this.dragOffset.y = e.clientY - this.position.y;
document.addEventListener('mousemove', this.drag);
document.addEventListener('mouseup', this.stopDrag);
},
drag(e) {
if (!this.isDragging) return;
this.position.x = e.clientX - this.dragOffset.x;
this.position.y = e.clientY - this.dragOffset.y;
},
stopDrag() {
this.isDragging = false;
document.removeEventListener('mousemove', this.drag);
document.removeEventListener('mouseup', this.stopDrag);
}
}
};
</script>
<style>
.popup {
position: absolute;
width: 300px;
height: 200px;
border: 1px solid #ccc;
background: #fff;
cursor: move;
}
.popup-header {
padding: 10px;
background: #f0f0f0;
border-bottom: 1px solid #ccc;
}
.popup-content {
padding: 10px;
}
</style>使用第三方库实现拖拽
如果需要更复杂的拖拽功能，可以使用第三方库如 vuedraggable 或 interact.js。
安装 interact.js：
npm install interactjs在 Vue 组件中使用 interact.js：
<template>
<div ref="popup" class="popup">
<div class="popup-header">可拖拽窗口</div>
<div class="popup-content">内容区域</div>
</div>
</template>
<script>
import interact from 'interactjs';
export default {
mounted() {
interact(this.$refs.popup)
.draggable({
onmove: (event) => {
const target = event.target;
const x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx;
const y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
target.style.transform = `translate(${x}px, ${y}px)`;
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
});
}
};
</script>
<style>
.popup {
position: absolute;
width: 300px;
height: 200px;
border: 1px solid #ccc;
background: #fff;
cursor: move;
}
.popup-header {
padding: 10px;
background: #f0f0f0;
border-bottom: 1px solid #ccc;
}
.popup-content {
padding: 10px;
}
</style>拖拽限制边界
为了防止拖拽超出视口范围，可以添加边界限制逻辑。
drag(e) {
if (!this.isDragging) return;
const newX = e.clientX - this.dragOffset.x;
const newY = e.clientY - this.dragOffset.y;
const maxX = window.innerWidth - this.$el.offsetWidth;
const maxY = window.innerHeight - this.$el.offsetHeight;
this.position.x = Math.max(0, Math.min(newX, maxX));
this.position.y = Math.max(0, Math.min(newY, maxY));
}拖拽性能优化
频繁的 DOM 操作可能影响性能，可以使用 transform 代替 left 和 top 进行移动。
<div
class="popup"
:style="{ transform: `translate(${position.x}px, ${position.y}px)` }"
@mousedown="startDrag"
></div>以上方法可以实现 Vue 中弹出窗口的拖拽功能，根据需求选择原生实现或第三方库方案。
