双体系建设网站,豆浆怎么制作教程,精准营销案例,网站设计需要考虑哪些基本原则目录 需求思路代码页面展示【补充】纯js实现 需求 浮动的盒子添加鼠标拖拽功能 思路
给需要拖动的盒子添加鼠标按下事件鼠标按下后获取鼠标点击位置与盒子边缘的距离给 document 添加鼠标移动事件鼠标移动过程中#xff0c;将盒子的位置进行重新定位侦听 document 鼠标弹起将盒子的位置进行重新定位侦听 document 鼠标弹起移除鼠标移动事件
代码
!-- 鼠标拖拽盒子 --
templatediv!-- 【1】给需要拖动的盒子添加鼠标按下事件 --div refbtns classbtns mousedownmousedownHandler试试拖动我/div/div
/templatescript
export default {name: Drag,components: {},data() {return {mouseToBoxRangeX: 0, // 鼠标点击位置与盒子边缘的距离mouseToBoxRangeY: 0 // 鼠标点击位置与盒子边缘的距离}},computed: {},watch: {},mounted() {// 【5】侦听 document 鼠标弹起移除鼠标移动事件document.addEventListener(mouseup, () {document.removeEventListener(mousemove, this.mousemoveHandler)})},methods: {mousedownHandler($event) {// 【2】鼠标按下后获取鼠标点击位置与盒子边缘的距离// 鼠标点击位置与盒子边缘的距离 鼠标点击位置 - 盒子当前位置this.mouseToBoxRangeX $event.pageX - this.$refs.btns.offsetLeftthis.mouseToBoxRangeY $event.pageY - this.$refs.btns.offsetTop// 【3】给 document 添加鼠标移动事件document.addEventListener(mousemove, this.mousemoveHandler)},mousemoveHandler($event) {// 【4】鼠标移动过程中将盒子的位置进行重新定位// 盒子当前位置 鼠标点击位置 - 鼠标点击位置与盒子边缘的距离 - 盒子自身设定的边距此处没有// 【注意】设置盒子最新位置时需加上单位 pxthis.$refs.btns.style.left $event.pageX - this.mouseToBoxRangeX pxthis.$refs.btns.style.top $event.pageY - this.mouseToBoxRangeY px}}
}
/scriptstyle langscss scoped
.btns {width: 70px;height: 147px;position: absolute;bottom: 10px;right: 10px;z-index: 2000;cursor: move;background-color: red;
}
/style
页面展示 【补充】纯js实现
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlestyle* {margin: 0;padding: 0;}.box {position: relative;width: 100px;height: 100px;background-color: tomato;margin: 100px;}/style/headbodydiv classbox/divscript/* 效果鼠标拖着盒子移动拖着鼠标左键按着不松手mousedown然后鼠标移动mousemove注意鼠标左键按下才注册上了鼠标移动事件*/var box document.querySelector(.box)// 添加鼠标点击事件box.addEventListener(mousedown, function (e) {console.log(this----, this)console.log(this.offsetLeft----, this.offsetLeft)console.log(this.offsetTop----, this.offsetTop)// 【1】获取鼠标在盒子里的位置// 鼠标的坐标 - 盒子的坐标var x e.pageX - this.offsetLeftvar y e.pageY - this.offsetTopconsole.log(x, y)// 注册鼠标移动事件给整个document添加 事件document.addEventListener(mousemove, move)function move(e) {// 【2】设置盒子的位置注意 给盒子添加定位// 鼠标的坐标 - 鼠标在盒子里的坐标// 【2.1】盒子没有外边距// box.style.left (e.pageX - x) px;// box.style.top (e.pageY - y) px;// 【2.2】盒子有外边距box.style.left e.pageX - x - 100 pxbox.style.top e.pageY - y - 100 px}// 【3】鼠标弹起删除移动事件document.addEventListener(mouseup, function () {// 删除鼠标移动事件document.removeEventListener(mousemove, move)})})/script/body
/html
