前端------拖拽事件

阳光穿透心脏的1/2处 2024-04-07 11:39 96阅读 0赞

## 拖拽事件 ##

在H5中实现了拖拽技术，允许用户在网页内部拖拽以及浏览器与其他应用程序之间的拖拽，通过拖拽可以传递数据。

**放置元素**:默认是不可以放置得 取消默认行为 event.preventDefault()

**拖放元素**:设置当前元素为可拖  draggable='true'

#### **拖放事件:拖放元素使用**    dragstart(开始拖放) drag(正在拖放) dragend(拖放结束) ####

用法：on拖放事件类型

#### 放置事件:放置元素使用   dragenter(进入放置元素)  dragover(放置元素内移动) drop(放置在放置元素内) ####

：用法：on放置事件类型

在拖拽事件中，通过DataTransfer来实现数据交互，通过event.dataTransfer来获取DataTransfer实例  
方法：setData、getData、clearData

在开始拖放事件 dragstart  **传输数据**:event.dataTransfer.setData();  
在放置事件drop **获取数据**:event.dataTransfer.getData();

####    拖拽事件流:dragstart->drag->dragenter->dragover->drop->drapend ####

案例：

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    	<title>Document</title>
    	<style>
    		.parent{
    			height: 200px;
    			border: 2px solid cyan;
    		}
    		.child{
    			width: 100px;
    			height: 100px;
    			background-color: blue;
    			color: white;
    			float: left;
    			margin:10px 0 0 10px;
    		}
    		body{
    			height: 400px;
    		}
    	</style>
    	<script>
    		window.onload=function(){
    			// 获取parent和child
    			var parent=document.querySelector('.parent');
    			var childs=document.querySelectorAll('.child');
              // 将类数组转成数组
    			childs=Array.from(childs);
    
    			// 给每一个孩子节点绑定事件方法：
    			// childs.forEach(function(item){
    			// 	item.onclick=function(){
    			// 		parent.appendChild(this)
    			// 	}
    			// });
    
    
    			childs.forEach(function(item){
    				// 拖动事件 
    				// 开始拖动 on事件类型
    				item.ondragstart=function(event){
    					console.log('ondragstart开始拖动了');
    					// console.log(event,'事件对象');
    					// 将拖动元素的id传出去
    					// dataTransfer.setData 传输数据 参数(key value)
    					console.log(item.id);
    					event.dataTransfer.setData('id',item.id);
    				}
    				// 正在拖动
    				item.ondrag=function(){
    					console.log('ondrap正在拖动');
    				}
    				// 拖动结束
    				item.ondragend=function(){
    					console.log('ondragend拖动结束');
    				}
    			})
    
    
    			// 放置事件 --放置元素 parent
    			// 进入到放置元素
    			parent.ondragenter=function(){
    				console.log('ondragenter进入到放置元素');
    			}
    			// 在放置元素内移动
    			parent.ondragover=function(){
    				console.log('ondragover正在放置元素内移动');
    				// 将放置元素设置为可放置   取消默认 默认时不可放置
    				event.preventDefault();
    			}
    			// 将拖动元素放置到放置元素
    			parent.ondrop=function(event){
    				console.log('ondrop放置');
    				//获取拖动元素传输得数据getData(key)
    				// console.log(event.dataTransfer.getData('id'),'事件对象');
    				var id=event.dataTransfer.getData('id');
    				this.appendChild(document.querySelector('#'+id))
    				// 阻止事件冒泡
    				event.stopPropagation()
    			}
    			// 将拖动元素放置到body
    			document.body.ondragover=function(){
    				console.log('ondragover正在放置元素内移动');
    				// 将放置元素设置为可放置
    				event.preventDefault();
    			}
    			// 将拖动元素放置到放置元素
    			document.body.ondrop=function(event){
    				console.log('ondrop放置');
    				//获取拖动元素传输的数据getData(key)
    				// console.log(event.dataTransfer.getData('id'),'事件对象');
    				var id=event.dataTransfer.getData('id');
    				this.appendChild(document.querySelector('#'+id))
    				// 阻止事件冒泡
    				event.stopPropagation()
    			}
    			
    			
    		}
    	</script>
    </head>
    <body>
    	
    	
    	<div class="parent"></div>
    	
    	<div class="child" id="one" draggable="true">one</div>
    	<div class="child" id="two" draggable="true">two</div>
    	<div class="child" id="three" draggable="true">three</div>
    	<div class="child" id="four" draggable="true">four</div>
    </body>
    </html>

![ca85ca3df7e24e5b81f8b7510854be91.png][]

**难点：**

在开始拖动事件**dragstart**中将拖动元素的id传出去

// dataTransfer.setData 传输数据 key value
    event.dataTransfer.setData('id',item.id);

在放置元素内移动**dragover**中要将放置元素设置为可放置，默认是不可放置的

// 将放置元素设置为可放置
    				event.preventDefault();

将拖动元素放置到放置元素中**drop**获取拖动元素传输的数据getData(key)

//获取拖动元素传输得数据getData(key)
    			
    				var id=event.dataTransfer.getData('id');

将拖动元素放置到放置元素中**drop**将child添加到parent

this.appendChild(document.querySelector('#'+id))

将拖动元素放置到放置元素中**drop** 要阻止事件冒泡

// 阻止事件冒泡
    				event.stopPropagation()

在放置元素内移动**dragover**中要将放置元素设置为可放置， 将拖动元素放置到body

document.body.ondragover=function(){
    				console.log('ondragover正在放置元素内移动');
    				// 将放置元素设置为可放置
    				event.preventDefault();
    			}

将拖动元素放置到放置元素中**drop**将拖动元素放置到放置元素 并且要阻止事件冒泡

document.body.ondrop=function(event){
    				console.log('ondrop放置');
    				//获取拖动元素传输得数据getData(key)
    				var id=event.dataTransfer.getData('id');
    				this.appendChild(document.querySelector('#'+id))
    				// 阻止事件冒泡
    				event.stopPropagation()
    			}

[ca85ca3df7e24e5b81f8b7510854be91.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/30f6fab607094c84a6014e9029833c0a.png