vue拖拽

<div class="img-box"  v-if="curPicObject" @click.stop>
     <img class="img" :src="curPicObject.imageUrl" alt="" style="width: 100%">
     <div class="v-move"
          v-if="curPicObject && curPicObject.goodsTagList"
          v-for="(labelItem,cIndex) in curPicObject.goodsTagList" :key="cIndex"
          :style="{left:labelItem.position.left+'px',top:labelItem.position.top+'px'}"
          @mousedown.stop="function (e){dragDown(e, cIndex)}">
               <div class="pointer"></div>
               <div class="wire"></div>
               <div class="box" @click.stop="editProTag(cIndex)">                
                   {{labelItem.goodsTagTitle}}  <i class="el-icon-error" 
                    @click.stop="deleteProLabel(cIndex)"></i>
               </div>
      </div>
</div>

public dragDown(e,index){
        console.log(e,index);
        let me =this;
        let firstTime = 0;
        let lastTime = 0;
        let targetNode , parentNode;
        this.clickKeyFlag = false;
        if (e.target.parentElement.classList.contains('v-move')){
            targetNode = e.target.parentElement;
            parentNode = targetNode.parentElement;

        }else if (e.target.classList.contains('v-move')){
            targetNode = e.target;
            parentNode = targetNode.parentElement;

        }else{
            return false;
        }

        let dragObj = {
            targetBox : targetNode,
            parentBox : parentNode,
            dragging : false,
            boxX : 0,
            boxY : 0,
            mouseX : 0,
            mouseY : 0,
            offsetX : 0,
            offsetY : 0,
            init(e){
                // 鼠标按下的动作
                dragObj.down(e);
                // 鼠标的移动动作
                document.onmousemove = dragObj.move;
                // 释放鼠标的动作
                document.onmouseup = dragObj.up;
            },

            down(e){
                firstTime = new Date().getTime();
                console.log(me.clickKeyFlag,"---down");
                dragObj.dragging = true;

                // 获取元素所在的坐标
                dragObj.boxX = dragObj.targetBox.offsetLeft;
                dragObj.boxY = dragObj.targetBox.offsetTop;

                // 获取鼠标所在的坐标

                dragObj.mouseX = Math.floor(dragObj.getMouseXY(e).x);
                // noinspection JSSuspiciousNameCombination
                dragObj.mouseY = Math.floor(dragObj.getMouseXY(e).y);

                // 鼠标相对元素左和上边缘的坐标
                dragObj.offsetX = dragObj.mouseX - dragObj.boxX;
                dragObj.offsetY = dragObj.mouseY - dragObj.boxY
            },
            up(e){
                //解决mousedown 和 click 冲突
                lastTime = new Date().getTime();
                if((lastTime - firstTime) < 300){
                    console.log(me.clickKeyFlag,"---up");
                    me.clickKeyFlag = true;
                }
                dragObj.dragging = false
            },
            move(e){
                if (dragObj.dragging) {
                    // 获取移动后的元素的坐标
                    let x = dragObj.getMouseXY(e).x - dragObj.offsetX;
                    let y = dragObj.getMouseXY(e).y - dragObj.offsetY;

                    // 计算可移动位置的大小， 保证元素不会超过可移动范围
                    // 此处就是父元素的宽度减去子元素宽度
                    let width = dragObj.parentBox.clientWidth - dragObj.targetBox.offsetWidth;
                    let height = dragObj.parentBox.clientHeight - dragObj.targetBox.offsetHeight;

                    // min方法保证不会超过右边界，max保证不会超过左边界
                    x = Math.min(Math.max(0, x), width);
                    y = Math.min(Math.max(0, y), height);

                    // 给元素及时定位
                    dragObj.targetBox.style.left = x + 'px';
                    dragObj.targetBox.style.top = y + 'px';
                    // @ts-ignore
                    me.curPicObject.goodsTagList[index].position = {editPhoneWidth:375,left:x, top:y};
                    me.curPicObject.goodsTagList.splice(index, 1,me.curPicObject.goodsTagList[index]);
                   // me.curPicObject = Object.assign({},me.curPicObject);
                    me.qiKanInfo.qiKanImgUrls.splice(me.curPicIndex,1,me.curPicObject);

                    console.log(x, y);
                }
            },
            getMouseXY(e){
                let x = 0, y = 0;
                e = e || window.event;

                if (e.pageX) {
                    x = e.pageX;
                    y = e.pageY
                } else {
                    x = e.clientX + document.body.scrollLeft - document.body.clientLeft;
                    y = e.clientY + document.body.scrollTop - document.body.clientTop
                }
                return {
                    x: x,
                    y: y
                }
            }
        };

        dragObj.init(e);
    }