vue實(shí)現(xiàn)拖拽小圖標(biāo)
如何給vue項(xiàng)目里面寫拖拽懸浮小圖標(biāo)呢,供大家參考,具體內(nèi)容如下
首先
1、html文件 一定要給父盒子一個(gè)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里面設(shè)置
position: { x: 0, y: 0 }, ? ? ? nx: "", ? ? ? ny: "", ? ? ? dx: "", ? ? ? dy: "", ? ? ? xPum: "", ? ? ? yPum: "",
3、在方法里面寫拖拽方法
//移動(dòng)端拖拽事件 ? ? 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; ? ? ? ? //添加限制:只允許在屏幕內(nèi)拖動(dòng) ? ? ? ? //屏幕寬度減去懸浮框?qū)捀? ? ? ? ? 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"; ? ? ? ? //阻止頁面的滑動(dòng)默認(rèn)事件 ? ? ? ? document.addEventListener( ? ? ? ? ? "touchmove", ? ? ? ? ? function () { ? ? ? ? ? ? // 1.2 如果碰到滑動(dòng)問題,請(qǐng)注意是否獲取到 touchmove ? ? ? ? ? ? // event.preventDefault(); //jq 阻止冒泡事件 ? ? ? ? ? ? event.stopPropagation(); // 如果沒有引入jq 就用 stopPropagation() ? ? ? ? ? }, ? ? ? ? ? false ? ? ? ? ); ? ? ? } ? ? }, ? ? //鼠標(biāo)釋放時(shí)候的函數(shù) ? ? 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; ? ? } ? }
到這里,我們的懸浮小圖標(biāo)就做完了。
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- vue懸浮可拖拽懸浮按鈕的實(shí)例代碼
- vuedraggable+element ui實(shí)現(xiàn)頁面控件拖拽排序效果
- Vue 實(shí)現(xiàn)可視化拖拽頁面編輯器
- 基于Vue實(shí)現(xiàn)拖拽功能
- 基于Vue實(shí)現(xiàn)拖拽效果
- 利用Vue-draggable組件實(shí)現(xiàn)Vue項(xiàng)目中表格內(nèi)容的拖拽排序
- vue實(shí)現(xiàn)element-ui對(duì)話框可拖拽功能
- vue實(shí)現(xiàn)div拖拽互換位置
- Vue.Draggable拖拽功能的配置使用方法
- Vue.Draggable實(shí)現(xiàn)拖拽效果
相關(guān)文章
vue 如何將二維數(shù)組轉(zhuǎn)化為一維數(shù)組
這篇文章主要介紹了vue 如何將二維數(shù)組轉(zhuǎn)化為一維數(shù)組,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04vue pages 多入口項(xiàng)目 + chainWebpack 全局引用縮寫說明
這篇文章主要介紹了vue pages 多入口項(xiàng)目 + chainWebpack 全局引用縮寫說明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09iview同時(shí)驗(yàn)證多個(gè)表單問題總結(jié)
這篇文章主要介紹了iview同時(shí)驗(yàn)證多個(gè)表單問題總結(jié),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09vue結(jié)合Axios+v-for列表循環(huán)實(shí)現(xiàn)網(wǎng)易健康頁面(實(shí)例代碼)
這篇文章主要介紹了vue結(jié)合Axios+v-for列表循環(huán)實(shí)現(xiàn)網(wǎng)易健康頁面,在項(xiàng)目下安裝axios,通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-03-03詳解polyfills如何按需加載及場(chǎng)景示例詳解
這篇文章主要為大家介紹了詳解polyfills如何按需加載及場(chǎng)景示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-02-02原生javascript中檢查對(duì)象是否為空示例實(shí)現(xiàn)
這篇文章主要為大家介紹了原生javascript中檢查對(duì)象是否為空示例實(shí)現(xiàn),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2021-11-11vue3使用particles插件實(shí)現(xiàn)粒子背景的方法詳解
這篇文章主要為大家詳細(xì)介紹了vue3使用particles插件實(shí)現(xiàn)粒子背景的方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助2022-03-03