移动端拉拽事件

Question

1.判断事件在距离顶端100px时改变背景色为blue
2.在chrome移动端模式中mousedown/up/move失效

<template>
     <div id="box">
        <p><strong>拖动状态:</strong><span></span></p>
        <p><strong>距离顶端:</strong><span></span></p>
    </div>
</template>

<script>
export default {
  mounted(){
    window.onload = function() {
        var oBox = document.getElementById("box");
        var aSpan = oBox.getElementsByTagName("span");
        var disY = 0;
        var bDrag = false;
        var aPos = [{
            y: oBox.offsetTop
        }]
        
        //鼠标按下, 激活拖拽 
        oBox.onmousedown = function(event) {
            var event = event || window.event;
            bDrag = true;
            disY = event.clientY - oBox.offsetTop;
              this.setCapture && this.setCapture();
              return false 
        };
        
        //拖拽开始 
        document.onmousemove = function(event) {
            if(!bDrag) return;
            var event = event || window.event;
            var iT = event.clientY - disY;
            var maxT = document.documentElement.clientHeight - oBox.offsetHeight;
            iT = iT < 0 ? 0 : iT;
            iT = iT > maxT ? maxT : iT;
            oBox.style.marginTop = oBox.style.marginLeft = 0;
            oBox.style.top = iT + "px";
            aPos.push({
                y: iT
            })
            status();
            return false
        };

        //鼠标释放, 结束拖拽 
        document.onmouseup = window.onblur = oBox.onlosecapture = function() {
            bDrag = false;
            oBox.releaseCapture && oBox.releaseCapture();
            status()
        };

        //监听状态函数 
        function status() {
            aSpan[0].innerHTML = bDrag;
            aSpan[1].innerHTML = oBox.offsetTop;
        }

        //初始调用 
        status()}
      }
}
</script>

<style>
      html,body{
        overflow: hidden;
    }
            
    body,div,p{
        margin: 0;
        padding: 0;
    }
            
    body {
        font: 12px/2 Arial;
    }
            
    p {
        padding: 0 10px;
        margin-top: 10px;
    }
    
    span {
        padding-left: 5px;
    }
    
    #box {
        position: absolute;
        width: 150px;
        height: 150px;
        border: 2px solid #ccc;
        top: 0%;
        left: 0%;
    }
    
</style>