給自定義圖片、按鈕增加手勢(shì)拖動(dòng)，并增加彈性效果

html

<div class="directory-mode" ref="matrix_box" type="primary" @touchstart.stop="touchStart" @touchend="touchend" @touchmove.stop="touchMove" @click="showPopover=true" :style="{opacity: alphaValue}">目錄
</div>

js

data() {
    return {
            leftX: 0,
            topY: 0,
            startX: '',
            startY: '',
            alphaValue: '0.5',
            maxX: 0,
            maxH: 0
    }
},
methods: {
        touchStart(event) {
            this.leftX = event.targetTouches[0].pageX - this.startX;
            this.maxX = document.body.clientWidth
            this.maxH = document.body.clientHeight
            this.alphaValue = '1'
            document.body.style.overflow = 'hidden'
            this.startX = event.targetTouches[0].pageX - this.$refs.matrix_box.offsetLeft;
            this.startY = event.targetTouches[0].pageY - this.$refs.matrix_box.offsetTop;
        },
        touchMove(event) {
            this.alphaValue = '1'
            event.stopPropagation()
            this.leftX = event.targetTouches[0].pageX - this.startX;
            this.topY = event.targetTouches[0].pageY - this.startY;
            this.$refs.matrix_box.style.position = 'absolute'
            this.$refs.matrix_box.style.left = this.leftX + "px";
            this.$refs.matrix_box.style.top = this.topY + "px";
        },
        touchend(event) {
            // 根據(jù)自己設(shè)備寬高計(jì)算拖動(dòng)范圍
            if(this.leftX < 0 || this.leftX < (this.maxX - 40)/2) {
                this.leftX = 0
            }else if(this.leftX > (this.maxX - 40)/2) {
                this.leftX = this.maxX - 40
            }
            if(this.topY < -290) {
                this.topY = -290
            }else if(this.topY > (this.maxH - 75 - 310)) {
                this.topY = this.maxH - 75 - 310
            }

            this.$refs.matrix_box.style.position = 'absolute'
            this.$refs.matrix_box.style.left = this.leftX + "px";
            this.$refs.matrix_box.style.top = this.topY + "px";
            document.body.style.overflow = ''
            this.$refs.matrix_box.removeEventListener("touchstart", this.touchStart)
            document.removeEventListener("touchmove", this.touchMove )
            setTimeout(() => {
                this.alphaValue = '0.5'
            }, 1000);
        },
}