javascript基础之拖拽--dataTransfer对象

2024-03-11

1037 字约 4 分钟

...

最近学了的一些关于拖拽的一些案例，原来的认识太过浅薄，所以以多个案例说明一下

目标导航

1，拖放事件
源对象
过程对象
目标对象

2，dataTransfer对象
setData（name，data） 存储数据
getData（name） 获取存储名字为“name”的数据
clearData（name） 清除dataTransfer存储的数据
setDragImage（element，x，y） 通过img元素设置拖放图标
files属性

3,元素拖拽 =》即从浏览器内拖动
3.1，将目标元素拖放至指定区域
3.2,设置拖动时的图标
3.3，鼠标拖拽实现移动效果

1，拖放事件

如果不使用drag元素的话;也可以使用onmousedown，onmouseover，onmouseup这三个来实现效果；想要拖动的话，必须在其设置draggable属性为true；需要注意的是，img和a默认为true

拖放过程中，被拖动的元素被称为目标对象，在这过程中经历的其他对象称为过程对象，最终到达的对象接叫目标对象；而每个都有其属性

源对象

ondragstart - 用户开始拖动元素时触发
ondrag - 元素正在拖动时触发
ondragend - 用户完成元素拖动后触发

过程对象

ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
**ondragover** - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
**ondragleave** - 当被鼠标拖动的对象离开其容器范围内时触发此事件

目标对象

**ondrop** - 在一个拖动过程中，释放鼠标键时触发此事件

注意：在拖动元素时，每隔 350 毫秒会触发 ondrag 事件。

2，dataTransfer对象

setData（name，data） 存储数据
第一个参数，要存储数据的名字（可以自己命名）
第二个参数，要存储的数据

getData（name） 获取存储名字为“name”的数据

clearData（name） 清除dataTransfer存储的数据
参数可选，为空则清空所有数据

setDragImage（element，x，y） 通过img元素设置拖放图标
element是拖拽时鼠标下面的图片（img或canvas元素）
x、y分别相对于图片的横向和纵向偏移量，对应鼠标指针

files属性
返回被拖拽的文件列表，是一个FileList对象，有length属性，可通过下标访问

3,元素拖拽 =》即从浏览器内拖动

3.1，最简单的元素拖拽小案例；将目标元素拖放至指定区域

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>拖拽图片至指定区域</title>
		<style>
			div {
				width: 400px;
				height: 500px;
				border: 1px solid red;
			}
		</style>

		<script>
			window.onload = function() {
				var img = document.getElementsByTagName("img")[0];
				var div = document.getElementsByTagName("div")[0];
	
				img.ondragstart = function(e) {
					
					e.dataTransfer.setData("text", e.target.id);
					console.log(e.target);	
					console.log(this);		

				}
				div.ondragover = function(e) {
					e.preventDefault();
				}
				div.ondrop = function(e) {
					e.preventDefault();
					var id = e.dataTransfer.getData("text"); 
					var data = document.getElementById(id);	
					
					this.appendChild(data);
				}
			}
		</script>
	</head>
	<body>
		<img src="img/demo (4).png" draggable="true" alt="" id="demo">
		<div>
			<p>拖动图片至此</p>
		</div>
	</body>
</html>

<!--
	拖拽的前提，在源目标上设置可拖拽，draggable=“true” 
	    注意：img和a默认为true
	一个拖拽大概只需要三个事件就可以完成，分别是ondrogstart，ondrogover，ondrop
	
	1，源对象 拖拽开始ondragstart
	   设置数据  e.dataTransfer.setData("text", e.target.id);
		
	2.目标对象 去除ondrogover默认行为
	    e.preventDafault();
		
	3,目标对象 拖拽完成drop
	    3.1，提取数据 var id = e.dataTransfer.getData("text");
	    3.2，根据id值得到节点 	var data = document.getElementById(id);	
	    3.3，开始操作

 -->

基本上所有的元素拖拽都是这样，效果不同是因为在3.3中的操作不同，这里是将一个图片（元素）移动到一个盒子中（目标对象）
自然还有其他效果，例如：
1，垃圾箱回收效果，即拖拽到一定目标元素消失；
data.parentNode.removeChild(data); //删除当前节点的办法,找到父节点,然后删除指定子节点

3.2,设置拖动时的图标

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML5拖放API之设置可拖放元素</title>
		<style>
			p {
				width: 100px;
				height: 100px;
				background-color: yellow;
			}
		</style>
	</head>
	<body>
		<h3>HTML5拖放API之设置可拖放元素</h3>
		<hr />
		<p draggable="true" id="p" ondragstart="drag(event)">这是一个可拖放的段落元素。</p>
		<script>
			p.ondragstart = function(ev) {
				
				
				var img = new Image();
				img.src = "img/star.jpg";
				ev.dataTransfer.setDragImage(img, 5, 5);
			}
		</script>

	</body>
</html>

3.3，鼠标拖拽实现移动效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>鼠标实现拖拽效果</title>
		<style type="text/css">
			body {
				position: relative;
				padding: 0;
				margin: 0;
			}

			img {
				position: absolute;
			}
		</style>
	</head>
	<body>
		<img src="img/p3.png" id="target">
		<script type="text/javascript">
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			target.ondragstart = function(e) {
				var disX = e.clientX - this.offsetLeft;
				var disY = e.clientY - this.offsetTop;
				target.ondrag = function(e) {
					var x = e.clientX;
					var y = e.clientY;

					if (x == 0 && y == 0) {
						return;
					}

					x -= disX;
					y -= disY;
					
					if (x < 0) {
						x = 0;
					} else if (x > window.innerWidth - this.offsetWidth) {
						x = window.innerWidth - this.offsetWidth
					}
					if (y < 0) {
						y = 0;
					} else if (y > window.innerWidth - this.offsetWidth) {
						y = window.innerWidth - this.offsetWidth
					}
					this.style.left = x + "px";
					this.style.top = y + "px";
					console.log(x, y)
				}
			}
		</script>
	</body>
</html>
<!-- 
	鼠标拖拽改变位置只需要改变源对象

 1，开始拖拽 ondragstart
	获得偏移量
	
2.ontrag
	获得鼠标x，y，
	当鼠标最后一刻时；不用此数据
		
		
	获得飞机的x，y
 -->