html5，拖拽元素

最新推荐文章于 2023-10-14 12:41:19 发布

C沉冰

最新推荐文章于 2023-10-14 12:41:19 发布

阅读量292

点赞数

CC 4.0 BY-SA版权

分类专栏： html 文章标签： html5 拖拽事件

本文链接：https://blog.youkuaiyun.com/qq_42228034/article/details/80348048

html 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了HTML5中的拖拽API，包括拖拽元素和目标元素的各类事件，如ondragstart、ondragleave、ondragend、ondragenter、ondragover和ondrop。通过实例展示了如何实现元素内容的拖放操作，并强调了在使用ondrop事件时需要阻止ondragover事件的默认行为。

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

本文主要是记录一下自己学习html中的进度，未来可以回来复习一下。

本文参考了@冯小东的文章——html5，拖拽api

链接：点击打开链接

html5中新增了拖拽事件，其中分为拖拽元素的事件，和目标元素的事件。

使用时需要给拖拽元素添加dragable="true"

拖拽元素的事件有：ondragstart事件开始拖拽时触发

ondragleave事件鼠标离开拖拽元素触发

ondragend事件结束拖拽触发

目标元素的事件有：ondragenter事件拖拽元素进入时触发

ondragover事件停止在目标元素时触发

ondrop事件当在目标元素上松开鼠标时调用。此方法默认被阻止，

如需使用请阻止ondragover事件的默认行为（给ondragover事件添加事件名.preventDefault()）

以下是我第一次使用此方法是所做的内容，将一个div中的内容移动到另一个中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			body>div{
				float: left;
				width: 300px;
				height: 400px;
				background-color: cornflowerblue;
				margin-left: 10px;
			}
			#div3{
				width: 200px;
				height: 30px;
				line-height: 30px;
				background-color: red;
				color: white;
				text-align: center;
				margin-top: 10px;
				cursor: pointer;
				position: absolute;
				margin: 0 auto;
			}
		</style>
	</head>
	<body>
		<div id="div1">
			<div id="div3" draggable="true">
				被拖拽的内容
			</div>
		</div>
		<div id="div2"></div>
	</body>
	<script>
		var obj;
		document.ondragstart=function(e){
			obj=e.target;
		}
		document.ondragover=function(e){
			e.preventDefault();
		}
		document.ondrop=function(e){
			e.target.appendChild(obj);
		}
	</script>
</html>

使用了一个中间参数obj来传递中间小盒子的内容，但是移动时，如果将内容向外拖动也会将盒子拖到整个body中

后面在阅读了开头提到的文章之后，对script做了一下更改

<script>
		var obj;
		document.ondragstart=function(e){
			offsetX= e.offsetX;  
        	offsetY= e.offsetY; 
		}
		document.ondragover=function(e){
			e.preventDefault();
		}
		document.ondrop=function(e){
       		var x= e.pageX;  
        	var y= e.pageY;
       		if(x==0 && y==0){  
            return; //不处理拖动最后一刻X和Y都为0的情形  
        	}  
       	 	x-=offsetX;  
        	y-=offsetY;

        	document.getElementById("div3").style.left=x+'px';  
        	document.getElementById("div3").style.top=y+'px';
		}
	</script>