用dw制作个介绍家乡网站,外贸响应式网站建设,优质院校建设网站,搭建企业官网目录 需求思路代码页面展示【补充】纯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
