vue拖动元素

最新推荐文章于 2024-02-23 11:00:01 发布

二狗子的翠花

最新推荐文章于 2024-02-23 11:00:01 发布

阅读量371

点赞数 1

分类专栏：前端文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Pure_White520/article/details/127868333

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

需要拖拽的图标：

<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);
        },