vue实现鼠标拖拽事件（并解决拖拽与点击事件的冲突问题）

最新推荐文章于 2025-04-02 22:06:05 发布

不二臣_

最新推荐文章于 2025-04-02 22:06:05 发布

阅读量7.9k

点赞数 5

分类专栏： vue 文章标签： vue.js html javascript css

本文链接：https://blog.csdn.net/qq_34458968/article/details/109513871

版权

vue 专栏收录该内容

11 篇文章

订阅专栏

本文详细介绍了如何在Vue.js项目中实现元素的拖拽功能，并解决了在实现拖拽过程中可能遇到的点击事件冲突问题，分别从HTML布局、CSS样式设置和JavaScript逻辑实现三个方面进行阐述。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html部分

<body>
<div class="new-wrapper fullPage" ref="fullPage" id="app" v-cloak>
	<div class="returnTop" 
		ref="returnTop"
		@click="returnTop" 
		v-show="showReturnTop" 
		@mousedown.stop="dragMove"
	>
		
	</div>
</div>
</body>

css部分

.returnTop{
	color: #fbb810;
	text-align: center;
	position: fixed;
	right:30px;
	bottom:22px;
	cursor:pointer;
	z-index: 2;
	width:60px;
	height:60px;
	background: url(<%=basePath%>images/returnTop.png) no-repeat;
	background-size: 100% 100%;
}

js部分

new Vue({
	el: '#app',
	data: {
		//拖拽返回顶部
		positionX:0,
        positionY:0,
	},
	methods:{
		//点击返回顶部
		returnTop:function(){
			var isDrag = this.$refs.returnTop.getAttribute('drag-flag');
			if (isDrag === 'true') {
				return false;
			}else{
				this.directToMove(1,'pre');
			};
		},
		//拖拽返回顶部
		dragMove:function(e){
			var dragStartTime = '';
      		        var dragEndTime = '';
                        var target = e.target;        
			target.setAttribute('drag-flag', false);
			dragStartTime = new Date().getTime()
                        //鼠标相对元素的位置
                        var disX = e.clientX - target.offsetLeft;
                        var disY = e.clientY - target.offsetTop;
                        document.onmousemove = function(e){       
                            //元素的位置
                            var left = e.clientX - disX;    
                            var top = e.clientY - disY;
                
                            this.positionX = top;
                            this.positionY = left;
                
                            target.style.left = left + 'px';
                            target.style.top = top + 'px';
			    dragEndTime = new Date().getTime();
			    if (dragEndTime - dragStartTime > 200) {
				target.setAttribute('drag-flag', true)
			    };
                        };
                        document.onmouseup = function(e) {
                            document.onmousemove = null;
                            document.onmouseup = null;
                        };
                },
	},
});