vue 可拖拽组件的实现

废话不多说，直接上代码

<template>
    <div
        class="discussIcon"
        ref="discussIcon"
        @touchstart="touchStart"
        @touchmove="touchMove"
        @touchend="touchEnd"
    ></div>
</template>
<script>
var dx, dy
var screenWidth = window.screen.width
var screenHeight = window.screen.height
export default {
    name: 'dragDrop',
    data () {
        return {
            flags: false,
            touchStartFlag: false,
            position: {
                lastx: 0,
                lasty: 0,
                x: 0,
                y: 0
            },
        };
    },
    methods: {
        touchStart (event) {
            this.flags = true
            this.touchStartFlag = true
            var touch
            if (event.touches) {
                touch = event.touches[0]
            } else {
                touch = event
            }
            // console.log('鼠标点所在位置', touch.clientX,touch.clientY)
            // console.log('div左上角位置', event.target.offsetTop,event.target.offsetLeft)
            dx = touch.clientX - event.target.offsetLeft
            dy = touch.clientY - event.target.offsetTop
        },
        touchMove () {
            if (this.flags) {
                var touch
                if (event.touches) {
                    touch = event.touches[0]
                } else {
                    touch = event
                }
                // 定位滑块的位置
                this.position.x = touch.clientX - dx
                this.position.y = touch.clientY - dy
                // 为了区分click事件
                if (this.touchStartFlag) {
                    this.position.lastx = this.position.x
                    this.position.lasty = this.position.y
                    this.touchStartFlag = false
                }
                // console.log('position', this.position.x, this.position.y )
                // console.log('positionlast', this.position.lastx, this.position.lasty )
                // 临界处理，防止拖出页面
                if (this.position.x < 0) {
                    this.position.x = 0
                } else if (this.position.x > screenWidth - touch.target.clientWidth) {
                    this.position.x = screenWidth - touch.target.clientWidth
                }
                if (this.position.y < 0) {
                    this.position.y = 0
                } else if (this.position.y > screenHeight - touch.target.clientHeight) {
                    this.position.y = screenHeight - touch.target.clientHeight
                }
                this.$refs.discussIcon.style.left = this.position.x + 'px'
                this.$refs.discussIcon.style.top = this.position.y + 'px'
                //阻止页面的滑动默认事件
                document.addEventListener("touchmove", function () {
                    event.stopPropagation()
                }, false)
            }
        },
        //鼠标释放时候的函数
        touchEnd () {
            this.flags = false
            // 移动距离过短 视为点击事件
            if (Math.abs(this.position.x - this.position.lastx) < 3 && Math.abs(this.position.y - this.position.lasty) < 3) {
                this.$emit('dragClick')
            }
            this.position.lastx = this.position.x
            this.position.lasty = this.position.y
        },
    }
}
</script>
<style lang="stylus" scoped>
.discussIcon {
    height: 100px
    width: 100px
    background-image: url('图片地址')
    background-size: 100% 100%
    border-radius: 50%
    position: absolute
    bottom: 170px
    right: 28px
    z-index: 999999
}
</style>