成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

vue實(shí)現(xiàn)移動(dòng)端拖拽懸浮按鈕

3403771864 / 1846人閱讀

　　移動(dòng)端拖拽懸浮按鈕如何用vue實(shí)現(xiàn)，下面看看具體內(nèi)容：

　　功能介紹：

　　開發(fā)中，要考慮用戶體驗(yàn)，懸浮按鈕不僅要顯示在側(cè)邊，更是可以允許隨意拖拽換位。

　　需求描述：

　　1、按鈕懸浮顯示在頁面?zhèn)冗叄?/p>

　　2、當(dāng)手指長按左鍵按鈕，即可允許拖拽改變位置；

　　3、按鈕移動(dòng)結(jié)束，手指松開，計(jì)算距離左右兩側(cè)距離并自動(dòng)移動(dòng)至側(cè)邊顯示；

　　4、移動(dòng)至側(cè)邊后，按鈕根據(jù)具體左右兩次位置判斷改變現(xiàn)實(shí)樣式；

　　整體思路：

　　1、按鈕實(shí)行position:fixed布局，在頁面兩側(cè)最上層懸浮顯示；

　　2、手指長按可使用定時(shí)器來判斷，若手指松開，則關(guān)閉定時(shí)器，等待下次操作再啟用；

　　3、跟隨手指移動(dòng)計(jì)算按鈕與頁面兩側(cè)的距離，判斷手指松開時(shí)停留的位置；

　　效果展示：

　　具體實(shí)現(xiàn)：

　　一、position:fixed布局：

　　使用定位實(shí)現(xiàn)

　　<!-- 外層ul控制卡片范圍 -->
　　<div>
　　<div
　　:class="[{moveBtn: longClick}, `${btnType}Btn`]">
　　<span>懸浮按鈕</span>
　　</div>
　　</div>


　　<style scoped>
　　@mixin notSelect{
　　-moz-user-select:none; /*火狐*/
　　-webkit-user-select:none; /*webkit瀏覽器*/
　　-ms-user-select:none; /*IE10*/
　　-khtml-user-select:none; /*早期瀏覽器*/
　　user-select:none;
　　}
　　@mixin not-touch {
　　-webkit-touch-callout: none;
　　-webkit-user-select: none;
　　-khtml-user-select: none;
　　-moz-user-select: none;
　　-ms-user-select: none;
　　user-select: none;
　　}
　　.floatBtn {
　　@include notSelect;
　　@include not-touch();
　　position: fixed;
　　z-index: 1;
　　overflow: hidden;
　　width: 100px;
　　left: calc(100% - 100px);
　　top: calc(100% - 100px);
　　color: #E0933A;
　　background: #FCEBD0;
　　font-size: 14px;
　　height: 36px;
　　line-height: 36px;
　　text-align: center;
　　box-sizing: border-box;
　　display: flex;
　　justify-content: center;
　　align-items: center;
　　padding: 10px;
　　&.rightBtn {
　　border-radius: 20px 0 0 20px;
　　}
　　&.leftBtn {
　　border-radius: 0 20px 20px 0;
　　}
　　&.moveBtn {
　　border-radius: 20px;
　　}
　　}
　　</style>

　　二、touch事件綁定：

　　應(yīng)用到touchstart，touchmove，touchend事件，使用定時(shí)器實(shí)現(xiàn)長按效果：

<div class="floatBtn"
　　:class="[{moveBtn: longClick}, `${btnType}Btn`]"
　　@touchstart="touchstart($event)"
　　@touchmove="touchMove($event)"
　　@touchend="touchEnd($event)"
　　>
　　<span>懸浮按鈕</span>
　　</div>


　　<script>
　　export default {
　　data() {
　　return {
　　timeOutEvent: 0,
　　longClick: 0,
　　// 手指原始位置
　　oldMousePos: {},
　　// 元素原始位置
　　oldNodePos: {},
　　btnType: 'right'
　　};
　　},
　　touchstart(ev) {
　　// 定時(shí)器控制長按時(shí)間，超過500毫秒開始進(jìn)行拖拽
　　this.timeOutEvent = setTimeout(() => {
　　this.longClick = 1;
　　}, 500);
　　const selectDom = ev.currentTarget;
　　const { pageX, pageY } = ev.touches[0]; // 手指位置
　　const { offsetLeft, offsetTop } = selectDom; // 元素位置
　　// 手指原始位置
　　this.oldMousePos = {
　　x: pageX,
　　y: pageY
　　};
　　// 元素原始位置
　　this.oldNodePos = {
　　x: offsetLeft,
　　y: offsetTop
　　};
　　selectDom.style.left = `${offsetLeft}px`;
　　selectDom.style.top = `${offsetTop}px`;
　　},
　　touchMove(ev) {
　　// 未達(dá)到500毫秒就移動(dòng)則不觸發(fā)長按，清空定時(shí)器
　　clearTimeout(this.timeOutEvent);
　　if (this.longClick === 1) {
　　const selectDom = ev.currentTarget;
　　// x軸偏移量
　　const lefts = this.oldMousePos.x - this.oldNodePos.x;
　　// y軸偏移量
　　const tops = this.oldMousePos.y - this.oldNodePos.y;
　　const { pageX, pageY } = ev.touches[0]; // 手指位置
　　selectDom.style.left = `${pageX - lefts}px`;
　　selectDom.style.top = `${pageY - tops}px`;
　　}
　　},
　　touchEnd(ev) {
　　// 清空定時(shí)器
　　clearTimeout(this.timeOutEvent);
　　if (this.longClick === 1) {
　　this.longClick = 0;
　　const selectDom = ev.currentTarget;
　　const {clientWidth, clientHeight} = document.body;
　　const {offsetLeft, offsetTop} = selectDom;
　　selectDom.style.left =
　　(offsetLeft + 50) > (clientWidth / 2) ?
　　'calc(100% - 100px)' : 0;
　　if (offsetTop < 90) {
　　selectDom.style.top = '90px';
　　} else if (offsetTop + 36 > clientHeight) {
　　selectDom.style.top = `${clientHeight - 36}px`;
　　}
　　this.btnType =
　　(offsetLeft + 50) > (clientWidth / 2) ?
　　'right' : 'left';
　　}
　　},
　　};
　　</script>

　　三、頁面引入：

　　單個(gè)頁面引入

　　<template>
　　<floatBtn/>
　　</template>


　　<script>
　　import floatBtn from './floatBtn';
　　export default {
　　components: {
　　floatBtn
　　},
　　};
　　</script>

  以上就是相關(guān)內(nèi)容，請(qǐng)大家繼續(xù)關(guān)注。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/127698.html

相關(guān)文章

  • react下移動(dòng)端可吸附懸浮窗，懸浮球，懸浮按鈕，支持拖動(dòng)拖拽功能

    摘要：基于實(shí)現(xiàn)的移動(dòng)端的可吸附懸浮按鈕預(yù)覽地址移動(dòng)端源碼地址安裝使用 基于react實(shí)現(xiàn)的移動(dòng)端的可吸附懸浮按鈕 預(yù)覽地址(移動(dòng)端)： https://kkfor.github.io/suspe... 源碼地址： https://github.com/kkfor/susp... 安裝 npm install suspend-button -S 使用 import React, { Compo...

    kun_jian 評(píng)論0 收藏0

  • react下移動(dòng)端可吸附懸浮窗，懸浮球，懸浮按鈕，支持拖動(dòng)拖拽功能

    摘要：基于實(shí)現(xiàn)的移動(dòng)端的可吸附懸浮按鈕預(yù)覽地址移動(dòng)端源碼地址安裝使用 基于react實(shí)現(xiàn)的移動(dòng)端的可吸附懸浮按鈕 預(yù)覽地址(移動(dòng)端)： https://kkfor.github.io/suspe... 源碼地址： https://github.com/kkfor/susp... 安裝 npm install suspend-button -S 使用 import React, { Compo...

    張紅新 評(píng)論0 收藏0

  • Vue2.0全家桶仿騰訊體育APP（Web版）

    摘要：全家桶仿騰訊體育一年一度的總決賽，相信球迷用的最多的就是騰訊體育這款，剛好上手，當(dāng)練手就把這個(gè)仿下來。這樣剛進(jìn)去的時(shí)候頁面加載時(shí)間明顯減短?？梢园我猱惒讲僮?。 Vue2.0全家桶仿騰訊體育APP 一年一度的NBA總決賽，相信球迷用的最多的就是騰訊體育這款A(yù)PP，剛好上手Vue，當(dāng)練手就把這個(gè)APP仿下來。 showImg(https://segmentfault.com/img/r...

    fnngj 評(píng)論0 收藏0

  • 可視化拖拽 UI 布局之拖拽篇

    前言：前段時(shí)間負(fù)責(zé)公司的運(yùn)營管理后臺(tái)項(xiàng)目，通過運(yùn)營后臺(tái)的PC端拖拽配置布局，達(dá)到App首頁模板的動(dòng)態(tài)UI界面配置，生成頁面。趁著周末，整理一下當(dāng)時(shí)所了解到的拖拽。文章會(huì)根據(jù)大家的反饋或者自己學(xué)習(xí)經(jīng)驗(yàn)的累積成長不定期更新豐富。如果你想了解更多PC端的拖拽開發(fā)，歡迎點(diǎn)贊關(guān)注或者收藏一波[鞠躬]。 之前在掘金一篇文章里看到這段話: UI 開發(fā)的三種模式 1.手寫標(biāo)簽和樣式代碼，生成頁面 2.可視化拖拽 ...

    ACb0y 評(píng)論0 收藏0

  • js仿蘋果懸浮可拖拽按鈕，并且點(diǎn)擊展開效果

    摘要：今天寫了一個(gè)仿蘋果的懸浮按鈕，由于只在右側(cè)展開，所以只能上下拖拽，展開效果入下拖拽如果這個(gè)元素的位置內(nèi)只有一個(gè)手指的話阻止瀏覽器默認(rèn)事件，重要超過頂部超過底部 今天寫了一個(gè)仿蘋果的懸浮按鈕，由于只在右側(cè)展開，所以只能上下拖拽，展開效果入下 showImg(https://segmentfault.com/img/bVZgLZ?w=376&h=404);1.html ...

    h9911 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<