javscript 简单拖拽（drag）拖放事件、dataTransfer详解，垃圾桶效果

刺骨的言语ヽ痛彻心扉 2021-11-01 08:12 363阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70]

#### 例子 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70 1]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>HTML5拖放API之回收站效果</title>
    		<style type="text/css">
    			#container { 
    				border: 1px solid;
    				width: 300px;
    				height: 250px;
    				float: left;
    			}
    
    			/* 文件夹样式 */
    			#container div { 
    				background: url(image/folder.png) no-repeat;
    				text-align: center;
    				float: left;
    				margin: 20px;
    
    				width: 100px;
    				height: 80px;
    				line-height: 80px;
    			}
    
    			/*设置回收站样式*/
    			div#recycle { 
    				width: 200px;
    				height: 200px;
    				float: left;
    				text-align: center;
    				background: url(image/recycle.jpg) no-repeat;
    				margin: 30px;
    			}
    		</style>
    
    	</head>
    	<body>
    		<h3>HTML5拖放API之回收站效果</h3>
    		<hr />
    		
    		<div id="container">
    			<div draggable="true" id="file1">
    				文件1
    			</div>
    			<div draggable="true" id="file2">
    				文件2
    			</div>
    			<div draggable="true" id="file3">
    				文件3
    			</div>
    			<div draggable="true" id="file4">
    				文件4
    			</div>
    		</div>
    		
    		<div id="recycle"></div>
    		<script type="text/javascript">
    			var oDiv = document.getElementById("container").getElementsByTagName("div");
    			var recycle = document.getElementById("recycle");
    						for (var i = 0; i < oDiv.length; i++) { 
    							oDiv[i].ondragstart = function(ev) { 
    								//设置传递的内容为被拖拽元素的id名称，数据类型为纯文本类型 
    								ev.dataTransfer.setData("text", ev.target.id);
    								console.log("开始拖动")
    							}
    						}
    						recycle.ondragover = function(ev) { 
    							//解禁当前元素为可放置被拖拽元素的区域
    							ev.preventDefault();
    							console.log("这是放到可拖拽区域生出的文字");
    						}
    						recycle.ondrop = function(ev) { 
    							//解禁当前元素为可放置被拖拽元素的区域
    							ev.preventDefault();
    							//获取当前被放置的元素id名称
    							var id = ev.dataTransfer.getData("text");
    							//根据id名称获取元素对象
    							var folder = document.getElementById(id);
    							//获取文件夹区域并删除该元素对象
    							document.getElementById("container").removeChild(folder);
    							// oDiv.parentNode.removeChild(oDiv); //删除指定节点,一般通过id选择删除,担当要删除的不是一个时就尽量不要这个
    						}
    
    		</script>
    
    	</body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70]: /images/20211101/57178d3aed114c0da1974ec6c3446d6a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70 1]: /images/20211101/db744022d56e4d3aac14d29a22c39100.png