js实现拖动div(精简版)

最新推荐文章于 2022-10-26 09:14:21 发布

fanyiwei123456

最新推荐文章于 2022-10-26 09:14:21 发布

阅读量867

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/fanyiwei123456/article/details/8935412

本文介绍了一种简单的DIV拖动效果实现方法，通过监听鼠标按下、移动和释放事件，结合DOM操作完成拖拽功能。文章提供了完整的JavaScript代码示例，并展示了如何设置样式使效果更加美观。

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

想写个div拖动，上网查了下发现代码都好长，弱菜实在看不下去，索性自己写个玩儿玩儿，事实证明这的确是个好主意，很好玩儿...

不废话了，上代码：

document.getElementById("chaTitle").onmousedown=function ()
{
	var chaElement = document.getElementById("chaElement");		
	var addPx = event.clientX-chaElement.offsetLeft;		//获取鼠标与div位置差
	var addPy = event.clientY-chaElement.offsetTop;
	this.style.cursor='move';								//为鼠标设置手势，为了美观而已
	tempThis = this;
	chaElement.onmousemove=function ()				
	{			
		tempThis.style.cursor='move';
		var pX = event.clientX-addPx;						//通过响应鼠标移动的位置得到div需要改变到的位置
		var pY = event.clientY-addPy;
		setDivStyle(pX,pY,this);							//调用改变div位置函数
		function setDivStyle(x,y,o)
		{
			o.style.left = x+"px";
			o.style.top = y+"px";
		}

	}
}

document.getElementById("chaTitle").onmouseup=function ()	//响应鼠标up事件，同时清理鼠标move事件
{
	document.getElementById("chaElement").onmousemove=null;
}

现在只需要为div设置Id即可拖动了

代码如下：

<div id="chaElement" style=" position:absolute; left:200px; right:200px; background-color:#ddd; width:300px; height:300px;";>
<div id="chaTitle" style="background-color:#00BD65; height:50px; cursor:move"></div>
军哥威武，军哥**，唉我去了
</div>