vue拖动元素

需要拖拽的图标:

<img src="@/YDCLOUD/assets/img/mapManagement/pozistion.png" :style="{top:flagOption.top+ 'px' ,left:flagOption.left+'px'}" @mousedown.stop="mouseDown" class="select_Img" />

样式设置:如果不设置user-drag为none可以会出现鼠标已经抬起,但是元素还是跟随鼠标移动的问题。

.select_Img {
    
    
  position: absolute;
  width: 55px;
  user-select: none;
  -webkit-user-drag: none;
}

方法:

    //移动小图标获取地点位置
        mouseDown(e) {
    
    
            const pos = {
    
     ...this.flagOption };//原来的图标位置
            const startY = e.clientY;
            const startX = e.clientX;
            const startTop = Number(pos.top);
            const startLeft = Number(pos.left);
            const move = (moveEvent) => {
    
    
                const curX = moveEvent.clientX;
                const curY = moveEvent.clientY;
                this.flagOption.top = curY - startY + startTop;
                this.flagOption.left = curX - startX + startLeft;
            };

            const up = () => {
    
    
                document.removeEventListener("mousemove", move);
                document.removeEventListener("mouseup", up);
            };
            document.addEventListener("mousemove", move);
            document.addEventListener("mouseup", up);
        },

猜你喜欢

转载自blog.csdn.net/Pure_White520/article/details/127868333