vue实现拖拽小图标
如何给vue项目里面写拖拽悬浮小图标呢,供大家参考,具体内容如下
首先
1、html文件 一定要给父盒子一个ID
<div class="xuanfu" id="moveDiv" @mousedown="down()" @touchstart="down()" @mousemove.prevent.stop="move()" @touchmove.prevent.stop="move()" @mouseup="end()" @touchend="end()" > <img class="img-kf" src="../../assets/images/csVip/kf.png" /> </div>
2、在data里面设置
position: { x: 0, y: 0 }, nx: "", ny: "", dx: "", dy: "", xPum: "", yPum: "",
3、在方法里面写拖拽方法
//移动端拖拽事件 down() { this.flags = true; let touch; if (event.touches) { touch = event.touches[0]; } else { touch = event; } this.position.x = touch.clientX; this.position.y = touch.clientY; this.dx = moveDiv.offsetLeft; this.dy = moveDiv.offsetTop; }, move() { if (this.flags) { let touch; if (event.touches) { touch = event.touches[0]; } else { touch = event; } this.nx = touch.clientX - this.position.x; this.ny = touch.clientY - this.position.y; this.xPum = this.dx + this.nx; this.yPum = this.dy + this.ny; //添加限制:只允许在屏幕内拖动 //屏幕宽度减去悬浮框宽高 const maxWidth = document.body.clientWidth - 54; const maxHeight = document.body.clientHeight - 54; if (this.xPum < 0) { //屏幕x限制 this.xPum = 0; } else if (this.xPum > maxWidth) { this.xPum = maxWidth; } if (this.yPum < 0) { //屏幕y限制 this.yPum = 0; } else if (this.yPum > maxHeight) { this.yPum = maxHeight; } moveDiv.style.left = this.xPum + "px"; moveDiv.style.top = this.yPum + "px"; //阻止页面的滑动默认事件 document.addEventListener( "touchmove", function () { // 1.2 如果碰到滑动问题,请注意是否获取到 touchmove // event.preventDefault(); //jq 阻止冒泡事件 event.stopPropagation(); // 如果没有引入jq 就用 stopPropagation() }, false ); } }, //鼠标释放时候的函数 end() { this.flags = false; },
4、css样式
.xuanfu { width: 1.7rem; height: 1.7rem; border-radius: 50%; // background: rgb(213, 91, 91); position: fixed; bottom: 4rem; right: 0.4rem; z-index: 9999999999; text-align: center; .img-kf { width: 1.7rem; height: 1.7rem; } }
到这里,我们的悬浮小图标就做完了。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
赞 (0)