简单网页元素拖拽实现

最新推荐文章于 2024-08-20 15:15:10 发布

a753255157

最新推荐文章于 2024-08-20 15:15:10 发布

阅读量670

点赞数

分类专栏： HTML 文章标签： HTML JavaScript

本文链接：https://blog.csdn.net/a753255157/article/details/50173155

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>简单网页元素拖拽实现</title>
<style type="text/css">
.aaa{
	border:1px solid #AAA;
	width:300px;
	height:300px;
	position:absolute;
}
</style>
</head>
<body style="margin:0">
<div style="position:absolute; width:100%; height:100%;">//父子元素的position都必须为absolute或relative
    <div class="aaa" style="left:500px;top:200px;">//left与top必须写在标签内，否则js无法读取
    </div>
    <div class="aaa" style="left:500px;top:200px;">
    </div>
    <div class="aaa" style="left:500px;top:200px;">
    </div>
</div>
<script type="text/javascript">
objs=document.getElementsByClassName("aaa");
var ox;
var oy;
var left;
var atop;
var dragging=false;
for(i=0;i<objs.length;i++)
{
	objs.item(i).addEventListener("mousedown",function(e){
		ox=e.clientX;
		oy=e.clientY;
		left=parseInt(this.style.left);
		atop=parseInt(this.style.top);
		dragging=true;
		this.classList.add("dragging");
	});
}
window.οnmοusemοve=function(e){//应绑定容器元素
	obj=document.getElementsByClassName("dragging").item(0);
	if(obj)
	{
		obj.innerHTML=e.clientX+" "+e.clientY;
		if(dragging)
		{
			obj.style.left=left+e.clientX-ox+"px";
			obj.style.top=atop+e.clientY-oy+"px";
		}
	}
}
window.οnmοuseup=function(){
	dragging=false
	obj=document.getElementsByClassName("dragging").item(0);
	if(obj)
	{
		obj.classList.remove("dragging");
	}
}
</script>
</body>
</html>