vue移动端拖拽浮动的icon图标
在右下角或者左下角的图标,有时候会遮挡住 数据,体验不是特别好。需要可拖拽、挪动。
结构
1 2 3 4 5 6 7 8 | < div id="item_box" @click="$router.push('/newAddPersonal')" @touchstart="getDown" @touchmove="getMove" @touchend="getEnd" > < img src="@/assets/common/personalVisit/icon_add.png" alt=""> </ div > |
css
1 2 3 4 5 6 7 8 9 10 11 | #item_box{ width : 90px ; height : 90px ; position : fixed ; right : 4% ; bottom : 10% ; } #item_box img{ width : 100% ; height : 100% ; } |
拖拽方法
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 | data() { return { flags: false , position: { x: 0, y: 0 }, nx: "" , ny: "" , dx: "" , dy: "" , xPum: "" , yPum: "" , }; }, methods: { getDown() { let item_box = document.querySelector( "#item_box" ); this .flags = true ; var touch; if (event.touches) { touch = event.touches[0]; } else { touch = event; } this .maxW = document.body.clientWidth - item_box.offsetWidth; this .maxH = document.body.clientHeight - item_box.offsetHeight; this .position.x = touch.clientX - item_box.offsetLeft; this .position.y = touch.clientY - item_box.offsetTop; this .dx = touch.clientX; this .dy = touch.clientY; }, getMove(event) { event.preventDefault(); let item_box = document.querySelector( "#item_box" ); if ( this .flags) { var 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; if ( this .nx < 0) { this .nx = 0; } else if ( this .nx > this .maxW) { this .nx = this .maxW; } if ( this .ny < 0) { this .ny = 0; } else if ( this .ny >= this .maxH) { this .ny = this .maxH; } item_box.style.left = this .nx + "px" ; item_box.style.top = this .ny + "px" ; document.addEventListener( "touchmove" , function () { // event.preventDefault() }, false ); } }, getEnd() { this .flags = false ;} } |
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
2019-02-06 vue中computed和watch