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项目中将element-ui table表格写成组件的实现代码
这篇文章主要介绍了vue项目中将element-ui table表格写成组件的方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下2019-06-06
这篇文章主要为大家详细介绍了vue+Element ui实现照片墙效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要介绍了详解vue2.0 不同屏幕适配及px与rem转换问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-02-02
基于vue-cli npm run build之后vendor.js文件过大的解决方法
今天小编就为大家分享一篇基于vue-cli npm run build之后vendor.js文件过大的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了vue轮播图插件vue-concise-slider的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了Vue-CLI 项目在pycharm中配置方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-08-08
这篇文章主要介绍了用VueJS写一个Chrome浏览器插件的实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
这篇文章主要介绍了vue格式化时间过滤器，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
这篇文章主要介绍了vue-froala-wysiwyg 富文本编辑器功能，分步骤给大家介绍了vue3.中如何安装使用froala,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-09-09
Axios 是一个简单的基于 promise 的 HTTP 客户端，适用于浏览器和 node.js。Axios 在具有非常可扩展的接口的小包中提供了一个简单易用的库，这篇文章主要介绍了vue3-HTTP请求之axios,需要的朋友可以参考下2022-12-12
最新评论