移动dom元素到任意位置H5

纯记录笔记-元素移动功能

记录开发遇到多次使用的功能

    <div @click="taskBack" ref="moveBtn"
        @mousedown="btnDown"
        @touchstart="btnDown"
        @mousemove="btnMove"
        @touchmove="btnMove"
        @mouseup="btnEnd"
        @touchend="btnEnd"
        @touchcancel="btnEnd" class="feed-back">
        移动的按钮
    </div>```

定义参数：
    flags: false,
    position: {
        x: 0,
        y: 0
    },
    nx: '',
    ny: '',
    dx: '',
    dy: '',
    xPum: '',
    yPum: '',
    moveBtn: {},
    timer: null,
    currentTop:0

```js
    mounted() {
        this.moveBtn = this.$refs.moveBtn;
        // window.addEventListener('scroll', this.hideButton);
    }
    methods: {
    // hideButton() {
		// 	console.log(111);
        //     this.timer&&clearTimeout(this.timer);
        //     this.timer = setTimeout(()=>{
        //      this.handleScrollEnd();
        //     },300);
        //     this.currentTop = document.documentElement.scrollTop || document.body.scrollTop;
        //     // this.hide = false;
        // },
        // handleScrollEnd(){
		// 	console.log(222);
        //     let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        //     if(scrollTop === this.currentTop){
        //     // this.hide = true;
        //     clearTimeout(this.timer);
        //     }
        // },
         // 实现移动端拖拽
        btnDown() {
            this.flags = true;
            let touch;
            if (event.touches) {
                    touch = event.touches[0];
            } else {
                    touch = event;
            }
            this.position.x = touch.clientX;
            this.position.y = touch.clientY;
            this.dx = this.moveBtn.offsetLeft;
            this.dy = this.moveBtn.offsetTop;
        },
        btnMove() {
            console.log(444);
            if (this.flags) {
                let touch;
                if (event.touches) {
                        touch = event.touches[0];
                } else {
                        touch = event;
                }
                this.nx = touch.clientX - this.position.x;
                this.ny = touch.clientY - this.position.y;
                this.xPum = this.dx + this.nx;
                this.yPum = this.dy + this.ny;
                let clientWidth = document.documentElement.clientWidth;
                let clientHeight = document.documentElement.clientHeight;
                if (this.xPum > 0 && this.xPum < (clientWidth - this.moveBtn.offsetWidth)) {
                        this.moveBtn.style.left = this.xPum + "px";
                }
                if (this.yPum > 0 && this.yPum < (clientHeight - this.moveBtn.offsetHeight)) {
                        this.moveBtn.style.top = this.yPum + "px";
                }

                //阻止页面的滑动默认事件
                document.addEventListener("touchmove", this.handler, {
                        passive: false
                });
            }
        },
        //鼠标释放时候的函数
        btnEnd() {
            console.log(555);
            this.flags = false;
            document.addEventListener('touchmove', this.handler, {
                    passive: false
            });
        },
        handler(e) {
            console.log(666);
            if(this.flags){
                    event.preventDefault();
            }else{
                    return true
            }
        }
}