web前端学习笔记（1）——拖拽测试版

最新推荐文章于 2023-10-23 22:48:53 发布

sqchenxiyuan

最新推荐文章于 2023-10-23 22:48:53 发布

阅读量639

点赞数

分类专栏： web前端学习笔记文章标签： html JavaScript web前端

本文链接：https://blog.youkuaiyun.com/ddkddkchen/article/details/48751167

版权

web前端学习笔记专栏收录该内容

3 篇文章

订阅专栏

本文记录了在web前端实现拖拽功能的学习过程，重点在于解决拖拽操作时的延迟问题。通过HTML和JavaScript，探讨了不同浏览器环境下事件处理的差异，如IE6/7/8仅支持window.event，而Firefox则需要通过参数传递事件。

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

HTML代码

<html>
	<head>
		<meta charset="utf-8" />
		<title>Dragtest</title>
		<style type="text/css">
			body
			{
				background-color: rgb(0,0,0);
				background-size: cover;
			}
		</style>
	</head>
	<body>
		<div style="width: 100%;height: 100%;
			position: relative;">
			<div id="divs" style="width: 100px;height: 100px;
				background-color: #787878;position: absolute;"
				οnmοuseοver="this.style.backgroundColor='#DCDCDC'"
				οnmοuseοut="this.style.backgroundColor='#787878',setTimeout('mouup()',100)"
				οnmοusedοwn="moudown(document.getElementById(this.id),event)"
				οnmοuseup="mouup()"
				οnmοusemοve="boxmove(document.getElementById(this.id),event)"
				align="center">
			</div>
		</div>
		<script src="js/move.js"></script>
	</body>
</html>

JS代码

var e;
var event;
var movestart=1;//bool
var ifmove=0;
var chaxy={x:0,y:0};
function getxy(event)
{
	e= event||window.event;
	var Point={x:0,y:0};
	Point.x=e.clientX;
	Point.y=e.clientY;
	/*document.write(Point.x);*/
	return Point;
}
function boxmove(box,event)
{
	if(ifmove)
	{
		var mouxy=getxy(event);
		if(movestart)
		{
			chaxy.x=mouxy.x-box.offsetLeft;
			chaxy.y=mouxy.y-box.offsetTop;
			movestart=0;
		}
		else
		{
			var nowxy={x:0,y:0};
			nowxy.x=mouxy.x-chaxy.x;
			nowxy.y=mouxy.y-chaxy.y;
			box.style.left=nowxy.x+'px';
			box.style.top=nowxy.y+'px';
		}
	}
	/*if(ifmove)
	{
		move=setTimeout(function(){
			boxmove(box,event);
		},10)
	}*/
}
function moudown(box,event)
{
	ifmove=1;
	boxmove(box,event);
}
function mouup()
{
	ifmove=0;
	movestart=1;
}

BUG：拖拽速度过快会停止

目标改进：拖拽无延迟

笔记：~~window对象参数要从网页函数层层导入不会随内部函数调用来进行~~

--------------------------------------------------------------------------------------------------------------------2015.11.30

添加事件IE6/7/8只支持window.event不支持参数传入，

Firefox只支持参数传入不支持其它方式。

IE9/Opera/Safari/Chrome 两种方式都支持。