vue2 添加拖拽功能
原创
©著作权归作者所有：来自51CTO博客作者wx66585bda8918b的原创作品，请联系作者获取转载授权，否则将追究法律责任
<!-- HomeComp.vue -->
<template>
<div class="home-comp" v-draggable>
<!-- 子组件内容 -->
</div>
</template>
<script>
export default {
directives: {
draggable: {
bind(el, binding, vnode) {
// 在元素上绑定mousedown事件，开始拖拽
el.addEventListener("mousedown", startDrag);
function startDrag(event) {
// 阻止默认行为，避免拖拽时选中文字等
event.preventDefault();
// 记录初始点击位置
const startX = event.clientX;
const startY = event.clientY;
// 记录元素初始位置
const startLeft = el.offsetLeft;
const startTop = el.offsetTop;
// 计算鼠标移动距离，并更新元素位置
function moveHandler(event) {
const offsetX = event.clientX - startX;
const offsetY = event.clientY - startY;
el.style.left = startLeft + offsetX + "px";
el.style.top = startTop + offsetY + "px";
}
// 结束拖拽时移除事件监听器
function endDrag() {
document.removeEventListener("mousemove", moveHandler);
document.removeEventListener("mouseup", endDrag);
}
// 监听mousemove和mouseup事件
document.addEventListener("mousemove", moveHandler);
document.addEventListener("mouseup", endDrag);
}
}
}
}
};
</script>
<style scoped>
.home-comp {
position: absolute;
/* 初始位置 */
left: 100px;
top: 100px;
}
</style>
