原生JS or Vue 事件案例合集(详细)
提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加
Section 1 单个或多个鼠标拖拽事件的理解
提示:写完文章后,目录可以自动生成,如何生成可参考右边的帮助文档
前言
虽然 但是 可能 也许 大概 现在我们都会使用第三方库element antdesign vant 等组件库是吧。但是呢,你去面试 或者说 产品提了个什么你没听过的需求,这个时候你不知道你能不能实现,或者说实现的难易度无法评估,无法准确的评估计划时间。这个时候,欸欸欸,你就该打开CSDN 打开你的关注 找到me,翻阅一下我的案例合集了!
提示:以下是本篇文章正文内容,下面案例可供参考
一、拖拽的理解及我们需要用什么去实现的思路?
- 拖拽 拖拽 拖拽那我们也应该要选中那一个元素进行拖是吧 Js事件里鼠标按下的事件 恰恰能达到我们选中元素的需求 mousedown事件是在鼠标键点下的时候触发(包括左键和右键)。
- 那么这个时候呢,我们拿到了我们需要拖动的元素,下一步就是让这个元素动起来,怎么动?或者说跟着什么动?Pc端当然是跟着鼠标动了 那我们就需要Js的另一个事件 mousemove 官方解释是鼠标在某个元素上时持续发生 也就是说鼠标只要在绑定的这个元素上 都会出现这个事件 所以我们可以通过这个事件持续的获取到鼠标的位置 从而实时的设置拖动元素的位置
- 到这里其实我们已经看得到效果了,但是还是有一些地方需要完善,mousemove 因为这个事件会一直执行 但是一次拖动总要有拖动完成的时候 所以我们需要在鼠标抬起的时候取消对应的事件 mouseup松开任意一个鼠标按钮时发生
二、具体实现方式(全代码 和 效果图在最后)
1.js代码逻辑
mousedown() {
// 全文需要用到三个事件 mousedown 鼠标按下 onmousemove 鼠标移动 onmouseup 鼠标抬起
// 拿到鼠标按下的元素 由于我案例只是单个所以 直接用的ref 如果是多个 你可以用动态的ref 或者在方法里传入事件event对象
let sourceDom = this.$refs.boxRef;
console.dir(sourceDom);
// 改变元素位置 其原理还是改变它的定位值 所以我们需要设置dom元素的定位 (子绝父相)
sourceDom.style.position = "absolute";
// 记住一点 拖动元素 是你鼠标按下的这个元素 在这个页面(或父级)的鼠标位置进行移动 而不是 你需要拖动的元素在自己元素内跟随着着鼠标移动
this.$refs.homeRef.onmousemove = (event) => {
/**
* pageX和pageY 鼠标到可视窗口左侧上侧距离 + 滚动条滚动距离(如果有滚动条)
* clientWidth clientHeigh 的实际宽度是 width(height) + 左右(上下)的padding
*/
// 因为我需要把鼠标指针 移动到元素的中间 所以需要除这个元素宽高的一半
sourceDom.style.left = event.pageX - sourceDom.clientWidth / 2 + "px";
sourceDom.style.top = event.pageY - sourceDom.clientHeight / 2 + "px";
};
// 当鼠标抬起时 我们需要清除在这个元素内的移动 和 抬起事件 否则会一直移动
this.$refs.homeRef.onmouseup = () => {
//这俩都要置为null
this.$refs.homeRef.onmousemove = null;
this.$refs.homeRef.onmouseup = null;
return false;
};
},
2.全部代码
<template>
<div class="home" ref="homeRef">
<div @mousedown="mousedown" ref="boxRef"></div>
</div>
</template>
<script>
export default {
components: {},
methods: {
mousedown() {
// 全文需要用到三个事件 mousedown 鼠标按下 onmousemove 鼠标移动 onmouseup 鼠标抬起
// 拿到鼠标按下的元素 由于我案例只是单个所以 直接用的ref 如果是多个 你可以用动态的ref 或者在方法里传入事件event对象
let sourceDom = this.$refs.boxRef;
console.dir(sourceDom);
// 改变元素位置 其原理还是改变它的定位值 所以我们需要设置dom元素的定位 (子绝父相)
sourceDom.style.position = "absolute";
// 记住一点 拖动元素 是你鼠标按下的这个元素 在这个页面(或父级)的鼠标位置进行移动 而不是 你需要拖动的元素在自己元素内跟随着着鼠标移动
this.$refs.homeRef.onmousemove = (event) => {
/**
* pageX和pageY 鼠标到可视窗口左侧上侧距离 + 滚动条滚动距离(如果有滚动条)
* clientWidth clientHeigh 的实际宽度是 width(height) + 左右(上下)的padding
*/
// 因为我需要把鼠标指针 移动到元素的中间 所以需要除这个元素宽高的一半
sourceDom.style.left = event.pageX - sourceDom.clientWidth / 2 + "px";
sourceDom.style.top = event.pageY - sourceDom.clientHeight / 2 + "px";
};
// 当鼠标抬起时 我们需要清除在这个元素内的移动 和 抬起事件 否则会一直移动
this.$refs.homeRef.onmouseup = () => {
//这俩都要置为null
this.$refs.homeRef.onmousemove = null;
this.$refs.homeRef.onmouseup = null;
return false;
};
},
},
};
</script>
<style lang="scss" scoped>
.home {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
div {
border: 1px solid pink;
width: 200px;
height: 200px;
}
}
</style>
3.效果预览
73d3d40e-cd5d-4297-9341-8c788fb54776
总结
看完了?学到了?赞呢?评论呢?走起来呀!!!