dom操作元素的拖拽drag

最新推荐文章于 2025-06-20 14:01:19 发布

转载最新推荐文章于 2025-06-20 14:01:19 发布 · 765 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/3759656/blog/2247691

文章标签：

#python

本文深入讲解HTML5拖放API的使用方法，包括如何通过设置元素的draggable属性使其可拖动，以及ondragstart、ondrag、ondragend、ondragenter、ondragover、ondrop等事件的详细解释与应用实例。

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

2019独角兽企业重金招聘Python工程师标准>>>

生命周期：
dragstart-drag-dragenter-dragover-drop-dragend

1.将拖放元素设置成可拖放的
   <div draggable="true">
2.写事件处理
   child.ondragstart = function(event){
       var dt = event.dataTransfer;
       dt.setData('text/plain',this.id);
   }
   parent.ondragover = function(event){
       //将放置元素设置成可放置的
       event.preventDefault();
   }
   parent.ondrop = function(event){
       var dt = event.dataTransfer;
       var id = dt.getData('text/plain');
       var node = document.getElementById(id);
       this.appendChild(node);
       //为了防止父元素也绑定了ondrop事件，从而引发的冒泡
       event.stopPropagation();
       //处理火狐新出的选项卡
       event.preventDefault();
   }
   同一个元素在页面上只存在一次。
   是拖拽，ondrop ---> 获取了元素，追加到了位置元素。该节点跑到了位置元素里，原来位置上的节点就没有了。
   dt.effectAllowed
       只能在dragstart中使用
       设置视觉效果
   dt.setDragImage(img,x,y);
       设置光标的图片，100，100，图片在光标的左上100距离处

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>拖拽</title>
	<style>
		body{
			height: 500px;
		}
		.parent{
			border:1px solid red;
			height: 200px;
		}
		.child{
			border:1px solid blue;
			width: 100px;
			height: 100px;
			margin:10px;
		}
	</style>
	<script>
		window.onload = function(){
			var parent = document.getElementsByClassName('parent')[0];
			var child = document.getElementsByClassName('child')[0];
			// 绑定事件
			// 在要拖放的元素上有dragstart  drag dragend事件
			child.ondragstart = function(event){
				console.log('开始拖放');
				// dt 存一个值 获取dataTransfer对象
				var dt = event.dataTransfer;
				// 设置值
				dt.setData('text/plain',this.id);
			}
			child.ondrag = function(){
				console.log('开始移动');
			}
			child.ondragend = function(){
				console.log('拖放结束');
			}
			// 在要放置的位置元素上有dragenter dragover  drop事件
			parent.ondragenter = function(){
				console.log('进入位置元素');
			}
			parent.ondragover = function(event){
				// 将位置元素设置成可放置的元素
				event.preventDefault();
				console.log('在位置元素内移动');
			}
			parent.ondrop = function(event){
				console.log('开始放置');
				// dt 取值
				var dt = event.dataTransfer;
				var id = dt.getData('text/plain');
				var node = document.getElementById(id);
				this.appendChild(node);
				// 阻止冒泡
				event.stopPropagation();
				// 处理火狐的默认事件
				// 阻止默认
				event.preventDefault();
			}
			//给body设置成可放置的元素
			//给body绑定放置事件
			document.body.ondragover = function(event){
				event.preventDefault();
			}
			document.body.ondrop = function(event){
				var dt = event.dataTransfer;
				var id = dt.getData('text/plain');
				var node = document.getElementById(id);
				this.appendChild(node);
				// 阻止冒泡
				event.stopPropagation();
				// 阻止默认
				event.preventDefault();
			}
		}
	</script>
</head>
<body>
	<div class="parent"></div>
	<div class="child" draggable="true" id="one"></div>
</body>
</html>

转载于:https://my.oschina.net/u/3759656/blog/2247691