可以拖动的div小例子

最新推荐文章于 2022-11-22 14:55:41 发布

消逝的星痕

最新推荐文章于 2022-11-22 14:55:41 发布

阅读量117

点赞数

文章标签： UP HTML

本文链接：https://blog.csdn.net/mxp0202/article/details/83878835

版权

以前看到很多页面中都有一个浮动窗口可以用鼠标拖过来拖过去，今天到网上搜了下，找了个比较简单的试了试，终于弄懂了到底是怎么回事，以后用到的时候就可以拷贝扩展了，再试试弄出JE论坛中的那种效果。
做一下记录，以后不用到处找了

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
	<title>dragTest</title>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">

	<script type="text/javascript">

	var isDrag=0;//是否可拖动标志，可拖动为1，不可拖动为2
	var divAndMouseX;//鼠标落点距离div左上角x坐标的差距
	var divAndMouseY;//鼠标落点距离div左上角y坐标的差距
	var divMove;
	//鼠标按下时
	function down(div){//鼠标按下
		isDrag=1;//将div设置为可拖动
		divMove=div;//用于下边拖动时的定位(新的位置的坐标)
		//首先计算鼠标与拖动对象左上角的坐标差，然后在下边拖动方法中，用鼠标的坐标减坐标差就是新位置的坐标了
		divAndMouseX=event.clientX-parseInt(div.style.left);
		divAndMouseY=event.clientY-parseInt(div.style.top);
	}
	function move(){//拖动过程计算div坐标
		if(isDrag==1){
			divMove.style.left=event.clientX-divAndMouseX;
			divMove.style.top=event.clientY-divAndMouseY;
		}
	}

	function up(){//放开鼠标将div设置为不可拖动
		isDrag=0;
	}
</script>
	</head>

	<body>
		<div id="divtest" onmousedown="down(this)" onmousemove="move()"
			onmouseup="up()"
			style="cursor: move; border: 1px dashed blue; background-color: lightblue; width: 50px; height: 50px; position: absolute; left: 100px; top: 50px;">
			<table width="100%" height="100%">
				<tr>
					<td>
						test
					</td>
				</tr>
			</table>
		</div>
	</body>
</html>

消逝的星痕

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
可以拖动的div小例子

以前看到很多页面中都有一个浮动窗口可以用鼠标拖过来拖过去，今天到网上搜了下，找了个比较简单的试了试，终于弄懂了到底是怎么回事，以后用到的时候就可以拷贝扩展了，再试试弄出JE论坛中的那种效果。做一下记录，以后不用到处找了[code="java"] dragTest var isDrag=0;//是否可拖动标志，可拖动为1，不可拖动为2 var d...
复制链接

扫一扫