div 的拖动且不影响 原有页面说我点击交互

HTML： 

<div    class="kongtiaojifang" ref="kongtiao" @mousedown="mouseDownHandleelse($event)" @mouseup="mouseUpHandleelse($event)" > </div>

 

js :

// 拖动div

        mouseDownHandleelse(event) {

            console.log('eventeventeventeventeventeventeventeventeventevent', event)

            console.log('this.$refs.kongtiao', this.$refs.kongtiao)

            this.moveDataelse.x = event.pageX - this.$refs.kongtiao.offsetLeft

            this.moveDataelse.y = event.pageY - this.$refs.kongtiao.offsetTop

            event.currentTarget.style.cursor = 'move'

            window.onmousemove = this.mouseMoveHandleelse

        },

        mouseMoveHandleelse(event) {

            const moveLeft = event.pageX - this.moveDataelse.x + 'px'

            const moveTop = event.pageY - this.moveDataelse.y + 'px'

            this.$refs.kongtiao.style.left = moveLeft

            this.$refs.kongtiao.style.top = moveTop

        },

        mouseUpHandleelse(event) {

            window.onmousemove = null

            event.currentTarget.style.cursor = 'move'

            console.log('鼠标松开了')

        },

 

 

css:

 .kongtiaojifang{

    z-index:  9999;

    background-color: rgb(245, 245, 245);

    width:1000px;height:auto;

    position: fixed;

    top: 150px;

    left: 550px;

    cursor: pointer;

  }

 

 

在 vue 中  要在data 中 申明

 moveDataelse: {

                x: null,

                y: null,

            },