需要拖拽的图标:
<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);
},