主頁(yè) > 知識(shí)庫(kù) > html5實(shí)現(xiàn)可拖拽移動(dòng)的懸浮圖標(biāo)的示例代碼

html5實(shí)現(xiàn)可拖拽移動(dòng)的懸浮圖標(biāo)的示例代碼

熱門標(biāo)簽:威海語(yǔ)音外呼系統(tǒng)平臺(tái) 通遼地圖標(biāo)注app 中國(guó)地圖標(biāo)注城市的 高德地圖標(biāo)注廁所 西安金倫外呼系統(tǒng) 智能語(yǔ)音電銷機(jī)器人客戶端 地圖標(biāo)注沿海城市房?jī)r(jià) 地圖標(biāo)注員工作內(nèi)容 江西ai電銷機(jī)器人如何

h5 上經(jīng)常會(huì)有這樣的需求:

需要在頁(yè)面上加上一個(gè)懸浮圖標(biāo),大致是如下圖的最終實(shí)現(xiàn)

但是往往按照設(shè)計(jì)稿是不會(huì)遮住主體區(qū)域的,但是實(shí)際上有時(shí)候偏偏會(huì)遮擋主體區(qū)域,但是為了更好的點(diǎn)擊量,又不得不懸浮在頁(yè)面上...

如果能讓圖標(biāo)可拖拽移動(dòng),這樣在遮住主體區(qū)域之后,用戶可自由移動(dòng),這種方案及可以兼顧了。

實(shí)現(xiàn)的效果如下:

(和微信的浮窗效果類似,左右位置靠邊顯示,上下位置隨意放)

話不多說(shuō),上代碼了

<div class="ys-float-btn" 
    :style="{'width': itemWidth+'px','height': itemHeight+'px','left': left+'px','top': top+'px'}"    
    ref="div"    
    @touchstart.prevent="(e) => {dragStart(e)}"     
    @touchend.prevent="(e) => {dragEnd(e)}"     
    @touchmove.prevent="(e) => {dragProgress(e)}"    
    >    
    <img src="./../assets/fc-icon.png" />
</div>
// 代碼直接在 vue 項(xiàng)目里,可自行改為js/jquery 寫法
data () {
    return {
        gapWidth: 10,
        itemWidth: 20, // 圖標(biāo)的寬度
        itemHeight: 30 // 圖標(biāo)的高度
    }
},
created() {      
    this.clientWidth = document.documentElement.clientWidth;     
    this.clientHeight = document.documentElement.clientHeight;      
    this.left = this.clientWidth - this.itemWidth - this.gapWidth;      
    this.top = this.clientHeight*0.8;   }
 
methods: {    
    dragStart(e) {        
        this.$refs.div.style.transition = 'none';
    },
    dragEnd(e) {        
        this.$refs.div.style.transition = 'all 0.3s';        
        if (this.left > this.clientWidth/2) {          
            this.left = this.clientWidth - this.itemWidth - this.gapWidth;
        } else {          
            this.left = this.gapWidth;        
        }      
    },      
    dragProgress(e) {        
        if (e.targetTouches.length === 1) {          
            let touch = event.targetTouches[0];          
            this.left = touch.clientX - this.itemWidth/2;              
            this.top = touch.clientY - this.itemHeight/2;        
        }      
    }
} 

以上代碼既可以上下也可以左右移動(dòng),如果只想讓可上下移動(dòng),就去掉 left 相關(guān)的設(shè)置和計(jì)算。

到此這篇關(guān)于html5實(shí)現(xiàn)可拖拽移動(dòng)的懸浮圖標(biāo)的示例代碼的文章就介紹到這了,更多相關(guān)html5可拖拽懸浮圖標(biāo)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!

標(biāo)簽:河池 青海 晉中 阜陽(yáng) 崇左 眉山 北海 營(yíng)口

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《html5實(shí)現(xiàn)可拖拽移動(dòng)的懸浮圖標(biāo)的示例代碼》,本文關(guān)鍵詞  html5,實(shí)現(xiàn),可拖,拽,移動(dòng),;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無(wú)關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《html5實(shí)現(xiàn)可拖拽移動(dòng)的懸浮圖標(biāo)的示例代碼》相關(guān)的同類信息!
  • 本頁(yè)收集關(guān)于html5實(shí)現(xiàn)可拖拽移動(dòng)的懸浮圖標(biāo)的示例代碼的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章