关于利用HTML5和CSS3实现文档的拖拽的

最新推荐文章于 2023-05-23 10:05:10 发布

Lurkers.

最新推荐文章于 2023-05-23 10:05:10 发布

阅读量329

点赞数

CC 4.0 BY-SA版权

分类专栏： Javascript

本文链接：https://blog.youkuaiyun.com/this_name_true/article/details/82661744

Javascript 专栏收录该内容

14 篇文章

订阅专栏

本文介绍如何使用HTML5和CSS3的拖放API来实现文档的拖拽功能，通过代码示例展示了具体实现过程，帮助读者理解这一现代网页技术的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图如下：

代码如下：

 <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>拖拽东西进来</title>
		<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
		<style>
			
			.finger{
				width: 200px;
				height: 200px;
				background: deepskyblue;
				margin-left: 600px;
				margin-top: 200px;
			}
		</style>
	</head>
	<body>
		<div class="drag" ></div>
		<div class="finger" id="finger"></div>
		
		<script>
			var oDrag=document.getElementsByTagName("div")[0];
			var oFinger=document.getElementById("finger");
			
				
				//1.文件进入
				oFinger.ondragenter=function(){
					this.innerHTML="可以放手"
					
				}
				
				//2.在元素上 阻止默认事件
				oFinger.ondragover=function(e){
					e.preventDefault()

				}
				
				//3.文件释放
				oFinger.ondrop=function(e){
					e.preventDefault()
					
					//阻止默认
					var fs=e.dataTransfer.files[0] //获取文件
					var reader =new FileReader() //实例化文件对象
					reader.readAsText(fs) //读取文件
					reader.onload=function(){  //文件加载完成事件
						oFinger.innerHTML=this.result
					}
					
					
				}
		</script>
	</body>
</html>

谢谢...