Vue中使用原生js实现拖动div框

HTML标签

<div class="overView" id="overView" v-show="overViewFlag">
    <div class="sgnqResultTitle" id="overViewTitle">
        标题
    </div>
    <div class="overViewPieDiv">
        <div>内容</div>
    </div>
</div>

拖动方法

// 拖动overView信息框
moveOverviewPanl() {
    let div1 = document.getElementById("overViewTitle");
    let div2 = document.getElementById("overView");
    div1.onmousedown = function (ev) {
        let oevent = ev || event;

        let distanceX = oevent.clientX - div2.offsetLeft;
        let distanceY = oevent.clientY - div2.offsetTop;

        document.onmousemove = function (ev) {
            let oevent = ev || event;
            let left = oevent.clientX - distanceX;
            let top = oevent.clientY - distanceY;

            if (left <= 0) {
                left = 0;
            } else if (left >= document.documentElement.clientWidth - div2.clientWidth) {
                //document.documentElement.clientWidth 屏幕的可视宽度
                left = document.documentElement.clientWidth - div2.clientWidth
            }
            if (top <= 0) {
                top = 0;
            } else if (top >= document.documentElement.clientHeight - div2.clientHeight) {
                // document.documentElement.clientHeight 屏幕的可视高度
                top = document.documentElement.clientHeight - div2.clientHeight;
            }

            div2.style.left = left + 'px';
            div2.style.top = top + 'px';
        };
        document.onmouseup = function () {
            document.onmousemove = null;
            document.onmouseup = null;
        };
    }
},