与DOM配合——带框的拖拽

最新推荐文章于 2024-06-07 19:20:09 发布

原创最新推荐文章于 2024-06-07 19:20:09 发布 · 225 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#带框拖拽 #与DOM配合

javascript 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了一种通过创建虚线框实现元素拖拽的方法。当鼠标点击目标元素时，生成一个与其相同尺寸的虚线框进行拖动，释放鼠标时更新原元素的位置。

摘要生成于 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>
.box {position:absolute; border:1px dashed black;}
#div1 {width:100px; height:100px; background:yellow; position:absolute;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload=function ()
{
	var oDiv=document.getElementById('div1');
	
	oDiv.onmousedown=function (ev)
	{
		var oEvent=ev||event;
		var disX=oEvent.clientX-oDiv.offsetLeft;
		var disY=oEvent.clientY-oDiv.offsetTop;
		
		var oNewDiv=document.createElement('div');//创建新的div
		
		oNewDiv.className='box';
		oNewDiv.style.width=oDiv.offsetWidth-2+'px';//减去两个像素的边框大小，整体视线合一
		oNewDiv.style.height=oDiv.offsetHeight-2+'px';
		oNewDiv.style.left=oDiv.offsetLeft+'px';
		oNewDiv.style.top=oDiv.offsetTop+'px';
		
		document.body.appendChild(oNewDiv);
		
		document.onmousemove=function (ev)
		{
			var oEvent=ev||event;
			
			oNewDiv.style.left=oEvent.clientX-disX+'px';
			oNewDiv.style.top=oEvent.clientY-disY+'px';
		};
		
		document.onmouseup=function ()
		{
			document.onmousemove=null;
			document.onmouseup=null;
			
			oDiv.style.left=oNewDiv.style.left;
			oDiv.style.top=oNewDiv.style.top;
			
			document.body.removeChild(oNewDiv);
		};
	};
};
</script>
</head>

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

以上代码实现了带框的拖拽，核心思想为当鼠标点击div时，新建一个与原div大小相同的虚线框，之后将原来的拖动div改为拖动虚线框，当鼠标抬起时，将虚线框清除并且让源div的offsetLeft和offsetTop等于虚线框的offsetLeft和offsetTop。