js实现拖拽效果

最新推荐文章于 2025-06-24 13:38:39 发布

charlene程程

最新推荐文章于 2025-06-24 13:38:39 发布

阅读量989

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： javascript 拖拽

本文链接：https://blog.youkuaiyun.com/charlene0824/article/details/49996317

javascript 专栏收录该内容

32 篇文章

订阅专栏

本文详细介绍了如何使用JavaScript实现拖拽元素的功能，包括事件监听、位置计算与限制，以及移动事件的处理。

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

当拖拽元素时，由js中的鼠标按下、鼠标移动和鼠标释放三个事件相继触发

function drag(ele,subEle){
//ele为要移动的元素，subEle为ele元素的子元素，当鼠标在subEle元素上按下时，触发鼠标按下事件	
subEle.onmousedown=function(event){
	
	var rLeft=event.clientX-ele.offsetLeft;
	var rTop=event.clientY-ele.offsetTop;
//当鼠标移动时 触发鼠标移动事件

	document.onmousemove=function(event){
		event=event||window.event;
		winW=document.documentElement.clientWidth||document.body.clientWidth;
		winH=document.documentElement.clientHeight||document.body.clientHeight;
		maxW=winW-login.offsetWidth;
		maxH=winH-login.offsetHeight;

//设定移动的位置
		var moveX=event.clientX-rLeft;
		var moveY=event.clientY-rTop；

//限定元素移动的范围，防止滚动条的出现
		if(moveX<0){
			moveX=0;
		}else if(moveX>maxW){
			moveX=maxW;
		}
		if(moveY<0){
			moveY=0;
		}else if(moveY>maxH){
			moveY=maxH;
		}
		ele.style.left=moveX+'px';
		ele.style.top=moveY+'px';

	}
}

//当鼠标放开时，撤销鼠标移动事件
top.onmouseup=function(){
	document.onmousemove=null;
}
}