vue实现移动端可拖拽式icon图标

本文实例为大家分享了vue实现移动端可拖拽式icon图标的具体代码，供大家参考，具体内容如下

需求描述：在移动端页面悬浮一个可随便拖拽的图标，类似于苹果手机的辅助触控小圆点，并且可随意拖动。

预览：

组件代码如下：

<template>
    <div class="ys-float-btn" :style="{'width':itemWidth+'px','height':itemHeight+'px','left':left+'px','top':top+'px'}"
         ref="div"
         @click ="onBtnClicked">
        <slot name="icon"></slot>
        <SvgIcon :iconClass="'changjianwentijieda'"
                 :style="{'width':itemWidth+'px','height':itemHeight+'px'}"/>
    </div>
</template>
 
 
<script>
    export default {
        name: "DragIcon",
        props:{
            itemWidth:{
                type:Number,
                default:40
            },
            itemHeight:{
                type:Number,
                default:40
            },
            gapWidth:{
                type:Number,
                default:10
            },
 
            coefficientHeight:{
                type:Number,
                default:0.8
            }
        },
        created(){
            this.clientWidth = document.documentElement.clientWidth;
            this.clientHeight = document.documentElement.clientHeight;
            this.left = this.clientWidth - this.itemWidth - this.gapWidth;
            this.top = this.clientHeight*this.coefficientHeight;
        },
        mounted(){
            this.$nextTick(()=>{
                const div = this.$refs.div;
                div.addEventListener("touchstart",(e)=>{
                    e.stopPropagation();
                    div.style.transition = 'none';
                });
                div.addEventListener("touchmove",(e)=>{
                        e.stopPropagation();
                        if (e.targetTouches.length === 1) {
                            let touch = event.targetTouches[0];
                            this.left = touch.clientX - this.itemWidth/2;
                            this.top = touch.clientY - this.itemHeight/2;
                        }
                    },
                    false
                );
                div.addEventListener("touchend",(e)=>{
                    e.stopPropagation();
                    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;
                    }
                    if(this.top<=36)
                    {
                        this.top=36+this.gapWidth
                    }
                    else{
                        let bottom=this.clientHeight-50-this.itemHeight-this.gapWidth
                        console.log(bottom,this.top)
                        if(this.top>=bottom)
                        {
                            this.top=bottom
                        }
 
                    }
                });
            });
        },
 
        methods:{
            onBtnClicked(){
                this.$emit("onFloatBtnClicked");
            },
 
        },
        data(){
            return{
                timer:null,
                currentTop:0,
                clientWidth:0,
                clientHeight:0,
                left:0,
                top:0,
            }
        }
    }
</script>
 
<style lang="scss" scoped>
    .ys-float-btn{
        background:rgba(56,181,77,1);
        box-shadow:0 2px 10px 0 rgba(0,0,0,0.1);
        border-radius:50%;
        color: #666666;
        z-index: 20;
        transition: all 0.3s;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: fixed;
        bottom: 20vw;
 
        img{
            width: 50%;
            height: 50%;
            object-fit: contain;
            margin-bottom: 3px;
        }
    }
    .su_img{
        width: 40px;
        height: 40px;
        margin: 8px 0 0 0;
    }
 
</style>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。