vue实现盒子内拖动方块移动的示例代码
更新时间：2023年08月16日 08:53:38 作者：russo_zhang
这篇文章主要给大家介绍了如何通过vue实现盒子内拖动方块移动,文章通过代码示例讲解的非常详细,具有一定的参考价值,感兴趣的小伙伴可以参考阅读本文
vue实现盒子内拖动方块移动
本文采用vue2的options api。
1. 创建盒子与方块
最简单的父子嵌套盒子，子盒子绝对定位。
<template>
<div class="Drag">
<div class="scroll_thumb"></div>
</div>
</template>
<script>
export default {
name: "Drag",
};
</script>
<style scoped>
.Drag {
position: relative;
width: 1000px;
height: 600px;
border: 1px solid #333;
margin: 100px auto;
}
.Drag .scroll_thumb {
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
background-color: gold;
}
</style>2.获取父盒子在文档的位置信息
使用getBoundingClientRect API获取
<template>
<div ref="drag" class="Drag">
<div class="scroll_thumb"></div>
</div>
</template>
<script>
export default {
name: "Drag",
data() {
return {
boxRect: {}, //父盒子位置信息
};
},
mounted() {
this.setBoxRect();
// 窗口变化时重新获取数据
window.addEventListener("resize", this.setBoxRect);
},
beforeDestroy() {
window.removeEventListener("resize", this.setBoxRect);
},
methods: {
setBoxRect() {
//获取父盒子在文档的位置信息
this.boxRect = this.$refs.drag.getBoundingClientRect();
},
},
}
</script>3.监听鼠标点击事件
<template>
<div ref="drag" class="Drag">
<div class="scroll_thumb" @mousedown="mousedown"></div>
</div>
</template>
<script>
export default {
methods: {
// 点击鼠标按键触发
mousedown() {
// 判断是否是鼠标左键
if (event.button !== 0) return;
// 监听鼠标移动与弹起事件
document.addEventListener("mousemove", this.mousemove);
document.addEventListener("mouseup", this.mouseup);
},
// 鼠标移动触发
mousemove(event) {
// 此为关键代码，下面进行分析
},
// 鼠标按键弹起时移除监听的时间
mouseup() {
this.removeMouseEvent()
},
removeMouseEvent() {
document.removeEventListener("mousemove", this.mousemove);
document.removeEventListener("mouseup", this.mouseup);
},
},
};
</script>4.计算方块跟随鼠标移动
<template>
<div ref="drag" class="Drag">
<!-- 动态计算方块的top与left -->
<div
class="scroll_thumb"
:style="{
width: `${thumbW}px`,
height: `${thumbH}px`,
top: `${thumbTop}px`,
left: `${thumbLeft}px`,
}"
@mousedown="mousedown"
></div>
</div>
</template>
<script>
export default {
name: "Drag",
data() {
return {
// 方块的位置
thumbTop: 0,
thumbLeft: 0,
// 定义方块的宽高
thumbW: 20,
thumbH: 20,
boxRect: {},
};
},
methods: {
mousemove(event) {
// 阻止浏览器默认的行为
event.preventDefault();
// 停止冒泡
event.stopPropagation();
// 方块定位的值 = 鼠标位置 - 方块自身宽高/2 - 父盒子左上角位置的值
// ps1：方块自身宽高/2，作用是使鼠标的位置始终在方块的中心点
// ps2: 父盒子左上角位置的值，是因为event.clientX/Y是采用文档定位，而thumbLeft是绝对定位，所以要矫正偏移的值
this.thumbLeft = event.clientX - this.thumbW / 2 - this.boxRect.left;
this.thumbTop = event.clientY - this.thumbH / 2 - this.boxRect.top;
},
},
};
</script>到此已经能够实现鼠标拖动了，但是方块可以拖动到任意位置，下面我们将进行限制。
5.将方块限制在盒子内移动
<template>
<div ref="drag" class="Drag">
<!-- 动态计算方块的top与left -->
<div
class="scroll_thumb"
:style="{
width: `${thumbW}px`,
height: `${thumbH}px`,
top: `${thumbTop}px`,
left: `${thumbLeft}px`,
}"
@mousedown="mousedown"
></div>
</div>
</template>
<script>
export default {
name: "Drag",
data() {
return {
// 方块的位置
thumbTop: 0,
thumbLeft: 0,
// 定义方块的宽高
thumbW: 20,
thumbH: 20,
boxRect: {},
};
},
methods: {
mousemove(event) {
event.preventDefault();
event.stopPropagation();
this.thumbLeft = event.clientX - this.thumbW / 2 - this.boxRect.left;
this.thumbTop = event.clientY - this.thumbH / 2 - this.boxRect.top;
// 调用限制
this.setLimit();
},
setLimit() {
// 获取方块的右侧与底部的值
const thumbRight = this.thumbLeft + this.thumbW;
const thumbBottom = this.thumbTop + this.thumbH;
// 当方块的位置超过顶部或左侧，将定位的值设置为0
if (this.thumbLeft <= 0) {
this.thumbLeft = 0;
}
if (this.thumbTop <= 0) {
this.thumbTop = 0;
}
// 当方块的位置超过底部或者右侧，将定位的值设置为父盒子宽高-方块本身宽高的值
if (thumbRight >= this.boxRect.width) {
this.thumbLeft = this.boxRect.width - this.thumbW;
}
if (thumbBottom >= this.boxRect.height) {
this.thumbTop = this.boxRect.height - this.thumbH;
}
},
},
};
</script>6.完整代码
<template>
<div ref="drag" class="Drag">
<!-- 动态计算方块的top与left -->
<div
class="scroll_thumb"
:style="{
width: `${thumbW}px`,
height: `${thumbH}px`,
top: `${thumbTop}px`,
left: `${thumbLeft}px`,
}"
@mousedown="mousedown"
></div>
</div>
</template>
<script>
export default {
name: "Drag",
data() {
return {
thumbTop: 0,
thumbLeft: 0,
thumbW: 20,
thumbH: 20,
boxRect: {},
};
},
mounted() {
this.setBoxRect();
window.addEventListener("resize", this.setBoxRect);
},
beforeDestroy() {
window.removeEventListener("resize", this.setBoxRect);
this.removeMouseEvent();
},
methods: {
setBoxRect() {
this.boxRect = this.$refs.drag.getBoundingClientRect();
},
mousedown(event) {
// 判断是否是鼠标左键
if (event.button !== 0) return;
document.addEventListener("mousemove", this.mousemove);
document.addEventListener("mouseup", this.mouseup);
},
mousemove(event) {
event.preventDefault();
event.stopPropagation();
this.thumbLeft = event.clientX - this.thumbW / 2 - this.boxRect.left;
this.thumbTop = event.clientY - this.thumbH / 2 - this.boxRect.top;
this.setLimit();
},
setLimit() {
const thumbRight = this.thumbLeft + this.thumbW;
const thumbBottom = this.thumbTop + this.thumbH;
if (this.thumbLeft <= 0) {
this.thumbLeft = 0;
}
if (this.thumbTop <= 0) {
this.thumbTop = 0;
}
if (thumbRight >= this.boxRect.width) {
this.thumbLeft = this.boxRect.width - this.thumbW;
}
if (thumbBottom >= this.boxRect.height) {
this.thumbTop = this.boxRect.height - this.thumbH;
}
},
mouseup() {
this.removeMouseEvent();
},
removeMouseEvent() {
document.removeEventListener("mousemove", this.mousemove);
document.removeEventListener("mouseup", this.mouseup);
},
},
};
</script>
<style scoped>
.Drag {
position: relative;
width: 1000px;
height: 600px;
border: 1px solid #333;
margin: 100px auto;
}
.Drag .scroll_thumb {
position: absolute;
background-color: gold;
}
</style>7.效果
8.应用
笔者做这个案例是为了实现虚拟列表的滚动条做的技术储备，还有其他应用或想法欢迎评论区留言。
以上就是vue实现盒子内拖动方块移动的示例代码的详细内容，更多关于vue实现盒子内方块移动的资料请关注脚本之家其它相关文章！
相关文章
本篇文章主要介绍了vue配置多页面的实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
这篇文章主要介绍了vue使用element ui自定义手机验证规则问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
这篇文章主要介绍了Vue.use与Vue.prototype的区别及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
vue中axios处理http发送请求的示例（Post和get）
本篇文章主要介绍了vue中axios处理http请求的示例（Post和get），这里整理了详细的代码,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-10-10
ant desing vue table 实现可伸缩列的完整例子
最近在使用ant-design-vue做表格时，遇到要做一个可伸缩列表格的需求，在网上一直没有找到好的方法，于是小编动手自己写个可以此功能，下面小编把ant desing vue table 可伸缩列的实现代码分享到脚本之家平台供大家参考2021-05-05
详解vue项目中如何引入全局sass/less变量、function、mixin
这篇文章主要介绍了详解vue项目中如何引入全局sass/less变量、function、mixin，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
有关vue 开发钉钉 H5 微应用 dd.ready() 不执行问题及快速解决方案
这篇文章主要介绍了有关vue 开发的钉钉 H5 微应用 dd.ready() 不执行问题及快速解决方案,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-05-05
在本篇文章中小编给大家整理的是关于vue总线机制(bus)知识点总结，有兴趣的朋友们可以跟着学习下。2020-05-05
在本篇文章里小编给大家分享的是一篇关于vue props 单项数据流实例分享内容，需要的朋友们可以参考下。2020-02-02
今天小编就为大家分享一篇vue自定义全局共用函数详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
最新评论