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

    拖拽事件

    在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

    案例：

    1. html>
    2. <html lang="en">
    3. <head>
    4. 	<meta charset="UTF-8">
    5. 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    6. 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    7. 	<title>Documenttitle>
    8. 	<style>
    9. 		.parent{
    10. 			height: 200px;
    11. 			border: 2px solid cyan;
    12. 		}
    13. 		.child{
    14. 			width: 100px;
    15. 			height: 100px;
    16. 			background-color: blue;
    17. 			color: white;
    18. 			float: left;
    19. 			margin:10px 0 0 10px;
    20. 		}
    21. 		body{
    22. 			height: 400px;
    23. 		}
    24. 	style>
    25. 	<script>
    26. 		window.onload=function(){
    27. 			// 获取parent和child
    28. 			var parent=document.querySelector('.parent');
    29. 			var childs=document.querySelectorAll('.child');
    30.           // 将类数组转成数组
    31. 			childs=Array.from(childs);
    32.  
    33. 			// 给每一个孩子节点绑定事件方法：
    34. 			// childs.forEach(function(item){
    35. 			// 	item.onclick=function(){
    36. 			// 		parent.appendChild(this)
    37. 			// 	}
    38. 			// });
    39.  
    40.  
    41. 			childs.forEach(function(item){
    42. 				// 拖动事件 
    43. 				// 开始拖动 on事件类型
    44. 				item.ondragstart=function(event){
    45. 					console.log('ondragstart开始拖动了');
    46. 					// console.log(event,'事件对象');
    47. 					// 将拖动元素的id传出去
    48. 					// dataTransfer.setData 传输数据 参数(key value)
    49. 					console.log(item.id);
    50. 					event.dataTransfer.setData('id',item.id);
    51. 				}
    52. 				// 正在拖动
    53. 				item.ondrag=function(){
    54. 					console.log('ondrap正在拖动');
    55. 				}
    56. 				// 拖动结束
    57. 				item.ondragend=function(){
    58. 					console.log('ondragend拖动结束');
    59. 				}
    60. 			})
    61.  
    62.  
    63. 			// 放置事件 --放置元素 parent
    64. 			// 进入到放置元素
    65. 			parent.ondragenter=function(){
    66. 				console.log('ondragenter进入到放置元素');
    67. 			}
    68. 			// 在放置元素内移动
    69. 			parent.ondragover=function(){
    70. 				console.log('ondragover正在放置元素内移动');
    71. 				// 将放置元素设置为可放置   取消默认 默认时不可放置
    72. 				event.preventDefault();
    73. 			}
    74. 			// 将拖动元素放置到放置元素
    75. 			parent.ondrop=function(event){
    76. 				console.log('ondrop放置');
    77. 				//获取拖动元素传输得数据getData(key)
    78. 				// console.log(event.dataTransfer.getData('id'),'事件对象');
    79. 				var id=event.dataTransfer.getData('id');
    80. 				this.appendChild(document.querySelector('#'+id))
    81. 				// 阻止事件冒泡
    82. 				event.stopPropagation()
    83. 			}
    84. 			// 将拖动元素放置到body
    85. 			document.body.ondragover=function(){
    86. 				console.log('ondragover正在放置元素内移动');
    87. 				// 将放置元素设置为可放置
    88. 				event.preventDefault();
    89. 			}
    90. 			// 将拖动元素放置到放置元素
    91. 			document.body.ondrop=function(event){
    92. 				console.log('ondrop放置');
    93. 				//获取拖动元素传输的数据getData(key)
    94. 				// console.log(event.dataTransfer.getData('id'),'事件对象');
    95. 				var id=event.dataTransfer.getData('id');
    96. 				this.appendChild(document.querySelector('#'+id))
    97. 				// 阻止事件冒泡
    98. 				event.stopPropagation()
    99. 			}
    100. 			
    101. 			
    102. 		}
    103. 	script>
    104. head>
    105. <body>
    106. 	
    107. 	
    108. 	<div class="parent">div>
    109. 	
    110. 	<div class="child" id="one" draggable="true">onediv>
    111. 	<div class="child" id="two" draggable="true">twodiv>
    112. 	<div class="child" id="three" draggable="true">threediv>
    113. 	<div class="child" id="four" draggable="true">fourdiv>
    114. body>
    115. html>

     

    难点：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • 相关阅读:
    Kylin (四) --------- Kylin 4.0 查询引擎
    网络安全之命令执行漏洞复现
    dfs找欧拉回路模板
    结构型-代理模式
    基于C#实现协同推荐 SlopeOne 算法
    使用OpenCV进行简单图像分割的3个步骤
    【QT基础入门】QT中的容器类：QList
    A39 STM32_HAL库函数 之 Rcc通用驱动 所有函数的介绍及使用
    计算连续性状的PRS得分
    【Redis】Redis实现分布式锁
  • 原文地址：https://blog.csdn.net/m0_46677484/article/details/126630573