【web前端实践】-----实现面板拖拽效果

最新推荐文章于 2024-06-22 18:54:12 发布

codeTcy

最新推荐文章于 2024-06-22 18:54:12 发布

阅读量3.2k

点赞数

分类专栏：前端实践文章标签： web前端

本文链接：https://blog.csdn.net/melocarter/article/details/88966311

版权

本文介绍了如何在Web前端实现面板的拖拽效果。首先，获取鼠标点击时与面板边界的距离，然后在移动过程中调整面板位置。同时，设置限制条件以防止面板超出屏幕范围。通过监听鼠标事件，动态更新面板的left和top属性，确保其在允许的区域内移动。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>拖动</title>
</head>
<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
	.loginPanel{
		width: 380px;
		height: 247px;
		left: 400px;
		top: 120px;
		position: absolute;
		border: 1px solid #ccc;
		background: #f6f6f6;
		-moz-border-radius: 10px;
		-webkit-border-radius: 10px;
		border-radius: 10px;
		-moz-box-shadow: 0 0 8px #000;
		-webkit-box-shadow: 0 0 8px #000;
		box-shadow: 0 0 8px #000;
	}
</style>
<body>
	<div class="loginPanel" id="loginPanel">
		
	</div>

	<script type="text/javascript">	
		window.drag;
		function drag(){
			var Panel=document.getElementById("loginPanel");
			Panel.fnDown;
		}

		function fnDown(event){
			event = event || window.event;
			var oDrag=document.getElementById('loginPanel');

			var disX=event.clientX-

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

codeTcy

关注关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
【web前端实践】-----实现面板拖拽效果

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>拖动</title></head><style type="text/css"> *{ margin: 0; padding: 0; } .loginPanel{...
复制链接

扫一扫