javascript拖拽封装

最新推荐文章于 2019-10-28 11:48:04 发布

原创最新推荐文章于 2019-10-28 11:48:04 发布 · 444 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#拖拽 #封装

javascript 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了一个简单的拖拽功能实现方法，并通过封装的方式使得该功能能够应用于多个HTML元素上。通过修改参数，可以轻松地为不同元素添加拖拽能力。

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#div1 {width:100px; height:100px; background:red; position:absolute;}
#div2 {width:100px; height:100px; background:yellow; position:absolute;}
#div3 {width:100px; height:100px; background:green; position:absolute;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload=function ()
{
	drag('div1');
	drag('div2');
	drag('div3');
};

function drag(id)
{
	var oDiv=document.getElementById(id);
	
	oDiv.onmousedown=function (ev)
	{
		var oEvent=ev||event;
		var disX=oEvent.clientX-oDiv.offsetLeft;
		var disY=oEvent.clientY-oDiv.offsetTop;
		
		document.onmousemove=function (ev)
		{
			var oEvent=ev||event;
			
			oDiv.style.left=oEvent.clientX-disX+'px';
			oDiv.style.top=oEvent.clientY-disY+'px';
		};
		
		document.onmouseup=function ()
		{
			document.onmousemove=null;
			document.onmouseup=null;
		};
	};
}
</script>
</head>

<body>
<div id="div1">
</div>

<div id="div2">
</div>

<div id="div3">
</div>
</body>
</html>

借鉴这种封装的思想，可以封装很多之前学习过的函数，只需要将其中写死的东西换做参数，将参数传入函数就能正常使用了。