javascript基础之拖拽（1）（详细篇）--dataTransfer对象

小灰灰 2024-04-18 12:46 45阅读 0赞

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

### 目标导航 ###

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) { 
    					//设置一个数据；名字为“text”，值为img的id值
    					e.dataTransfer.setData("text", e.target.id);
    					console.log(e.target);	//<img src="img/demo (4).png" draggable="true" alt="" id="img">；相当与this
    					console.log(this);		//和上一句一样,个人理解为.e是事件默认属性,e.target就是事件的目标,即img
    
    				}
    				div.ondragover = function(e) { 
    					e.preventDefault();//解禁当前元素为可放置被拖拽元素的区域,即允许在此放置物体
    				}
    				div.ondrop = function(e) { 
    					e.preventDefault();
    					var id = e.dataTransfer.getData("text"); //获取数据，获得的其实是id值 即demo
    					var data = document.getElementById(id);	//根据id选中元素 
    					// e.target.appendChild(data);
    					this.appendChild(data);//和上一句一样的含义，将id选择中的元素data 转移至div下
    				}
    			}
    		</script>
    	</head>
    	<body>
    		<img src="img/demo (4).png" draggable="true" alt="" id="demo">
    		<div>
    			<p>拖动图片至此</p>
    		</div>
    	</body>
    </html>

基本上所有的元素拖拽都是这样，效果不同是因为在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) { 
    				//这里的图像由于不是页面中的一个元素，因此不可能通过document对象获取到，
    				//只能通过新建一个对象，设置属性来得到
    				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">
    			// console.log(target)//直接可以同过id打印出<img src="img/p3.png" id="target" >
    			// var target =document.getElementById("target");//和上者一样
    			
    			//第一种方法
    			// target.ondragstart = function(e) { 
    			// var disX = e.offsetX;
    			// var disY = e.offsetY;
    			// console.log(disX, disY)
    			// target.ondrag = function(e) { 
    			// var x = e.pageX;
    			// var y = e.pageY;
    			// // console.log(x,y) ///最后一刻 0 0
    			// //徐需要注意的是：drag事件最后一刻，无法读取鼠标的坐标，pageX和pageY都变为0
    			// if (x == 0 && y == 0) { 
    			// return;
    			// }
    			// 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
    			// }
    			// // // console.log(x,y); //最后一刻无 0 0 
    			// //得到x y的坐标
    			// x -= disX;
    			// y -= disY;
    			// target.style.left = x + 'px';
    			// target.style.top = y + 'px';
    			// }
    			// }
    			
    			//第二种方法
    			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>

##### \[垃圾桶回收效果 \](https://blog.csdn.net/weixin\_44797182/article/details/99128148) #####

接下一篇文章：[https://blog.csdn.net/weixin\_44797182/article/details/100588078][https_blog.csdn.net_weixin_44797182_article_details_100588078]  
待续，，，

[https_blog.csdn.net_weixin_44797182_article_details_100588078]: https://blog.csdn.net/weixin_44797182/article/details/100588078