Vue练习四十四：06_01_完美拖曳

Demo 在线地址：
https://sx00xs.github.io/test/44/index.html
---------------------------------------------------------------
ide: vscode
文件格式：.vue
解析：（待补）

<template>
    <div class="box" ref="myBox" >
        <h2
        @mousedown="handleDown"
        @mousemove="handleMove"
        @mouseup="handleUp"
        >
            <a href="javascript:;"
            @click="handleClick"
            @mousedown="handleAdown"
            >点击回放拖动轨迹</a>
        </h2>
        <p><strong>Drag:</strong><span>{{ bDrag }}</span></p>
        <p><strong>offsetTop:</strong><span>{{ span1  }}</span></p>
        <p><strong>offsetLeft:</strong><span>{{ span2 }}</span></p>
    </div>
</template>
<script>
import { setInterval, clearInterval } from 'timers';
export default {
    name:'Mavs',
    data(){
        return{
            bDrag:false,
            span1:'',
            span2:'',
            disX:0,
            disY:0,
            pos:[
                {x:'', y:''}
            ]
        }
    },    
    
    methods:{
        handleInitlalSpan(){
            var elem = this.$refs.myBox;
            this.span1=elem.offsetTop;
            this.span2=elem.offsetLeft;
        },
        handleDown(){
            var elem = this.$refs.myBox;
            this.bDrag=true;
            this.disX = event.clientX - elem.offsetLeft;;
            this.disY = event.clientY - elem.offsetTop;
            //console.log(this.disX);
            //console.log(this.disY);

            this.pos.push({x:elem.offsetLeft, y:elem.offsetTop});

            return false;
        },
        handleMove(){
            if(!this.bDrag) return;
            var elem = this.$refs.myBox;
            var iL = event.clientX - this.disX;
            var iT = event.clientY - this.disY;
            var maxL = document.documentElement.clientWidth - elem.offsetWidth;
            var maxT = document.documentElement.clientHeight - elem.offsetHeight;

            iL = iL < 0 ? 0 : iL;
            iL = iL > maxL ? maxL : iL;
            iT = iT < 0 ? 0 : iT;
            iT = iT > maxT ? maxT : iT;

            elem.style.marginTop = 0;
            elem.style.marginLeft = 0;
            elem.style.left = iL + 'px';
            elem.style.top = iT + 'px';

            this.pos.push({x:iL, y:iT});

            this.span1=elem.offsetTop;
            this.span2 = elem.offsetLeft;

        },
        handleUp(){
            var elem = this.$refs.myBox;
            this.bDrag=false;
            this.span1=elem.offsetTop;
            this.span2 = elem.offsetLeft;
            
        },
        handleClick(){
            var _this=this;
            var elem = this.$refs.myBox;
            if(this.pos.length == 1) return;
            var timer=setInterval(function(){
                var myPos=_this.pos.pop();
                myPos ? (elem.style.left = myPos.x + 'px', elem.style.top = myPos.y + 'px',_this.status()) : clearInterval(timer)
            },30);
        },
        handleAdown(){
            event.cancelBubble=true
        },
        status(){
            var elem=this.$refs.myBox;
            this.span1=elem.offsetTop;
            this.span2=elem.offsetLeft;
        }
    },
    mounted(){
        this.handleInitlalSpan()
        document.addEventListener('mousemove',this.handleMove)
    }
}
</script>